Packages
mishka_chelekom
0.0.9
0.0.10-alpha.5
0.0.10-alpha.4
0.0.10-alpha.3
0.0.10-alpha.2
0.0.10-alpha.1
0.0.9
0.0.9-rc.2
0.0.9-rc.1
0.0.9-beta.5
0.0.9-beta.4
0.0.9-beta.3
0.0.9-beta.2
0.0.9-beta.1
0.0.9-alpha.20
0.0.9-alpha.18
0.0.9-alpha.17
0.0.9-alpha.16
0.0.9-alpha.15
0.0.9-alpha.14
0.0.9-alpha.13
0.0.9-alpha.12
0.0.9-alpha.11
0.0.9-alpha.10
0.0.9-alpha.9
0.0.9-alpha.8
0.0.9-alpha.7
0.0.9-alpha.6
0.0.9-alpha.5
0.0.9-alpha.4
0.0.9-alpha.3
0.0.9-alpha.2
0.0.9-alpha.1
0.0.8
0.0.8-rc.2
0.0.8-rc.1
0.0.8-beta.5
0.0.8-beta.4
0.0.8-beta.3
0.0.8-beta.2
0.0.8-beta.1
0.0.8-alpha.4
0.0.8-alpha.3
0.0.8-alpha.2
0.0.8-alpha.1
0.0.7
0.0.6
0.0.6-alpha.2
0.0.6-alpha.1
0.0.5
0.0.5-beta.2
0.0.5-beta.1
0.0.5-alpha.12
0.0.5-alpha.11
0.0.5-alpha.10
0.0.5-alpha.9
0.0.5-alpha.8
0.0.5-alpha.7
0.0.5-alpha.6
0.0.5-alpha.5
0.0.5-alpha.4
0.0.5-alpha.3
0.0.5-alpha.2
0.0.5-alpha.1
0.0.4
0.0.4-beta.3
0.0.4-beta.2
0.0.4-beta.1
0.0.4-alpha.9
0.0.4-alpha.8
0.0.4-alpha.7
0.0.4-alpha.6
0.0.4-alpha.5
0.0.4-alpha.4
0.0.4-alpha.3
0.0.4-alpha.2
0.0.4-alpha.1
0.0.3
0.0.3-alpha.3
0.0.3-alpha.2
0.0.3-alpha.1
0.0.2
0.0.2-rc.2
0.0.2-rc.1
0.0.2-beta.4
0.0.2-beta.3
0.0.2-beta.2
0.0.2-beta.1
0.0.2-alpha.3
0.0.2-alpha.2
0.0.2-alpha.1
0.0.1
Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView
Current section
Files
Jump to
Current section
Files
priv/headless/fieldset.eex
defmodule <%= @module %> do
@moduledoc """
Headless **fieldset** — groups related form controls under a shared, easily
stylable legend (Base UI parity).
Renders a native `<fieldset>`, so a `disabled` fieldset **natively disables
every control inside it** (including controls in nested fieldsets) with no JS.
The legend is rendered as a styleable `<div>` rather than a native `<legend>`
(which can't be freely positioned) and is associated with the group via
`aria-labelledby`, so it still names the group for assistive tech.
When `disabled`, the root and the legend both carry `data-disabled` for CSS.
Style via the `chelekom-fieldset*` classes and the `data-disabled` hook — this
component ships **no** colors or spacing.
"""
use Phoenix.Component
@doc type: :component
attr :id, :string, required: true, doc: "Unique id; anchors the legend association"
attr :disabled, :boolean,
default: false,
doc: "Natively disable every control in the group (also sets data-disabled)"
attr :class, :any, default: nil, doc: "Extra classes for the root"
attr :legend_class, :any, default: nil, doc: "Extra classes for the legend part"
attr :rest, :global
slot :legend, doc: "The group label — a styleable <div> wired to the fieldset via aria-labelledby"
slot :inner_block, required: true, doc: "The grouped form controls"
def <%= @component_prefix %>fieldset(assigns) do
~H"""
<fieldset
id={@id}
disabled={@disabled}
data-disabled={@disabled}
aria-labelledby={@legend != [] && "#{@id}-legend"}
class={["chelekom-fieldset", @class]}
{@rest}
>
<div
:if={@legend != []}
id={"#{@id}-legend"}
data-part="legend"
data-disabled={@disabled}
class={["chelekom-fieldset__legend", @legend_class]}
>
{render_slot(@legend)}
</div>
{render_slot(@inner_block)}
</fieldset>
"""
end
end