Headless Fieldset - Phoenix & LiveView Component

Overview of the Phoenix and LiveView Headless Fieldset Component

The Mishka Chelekom Headless Fieldset ships zero opinionated styling - it renders a native fieldset element, so a disabled fieldset natively disables every control inside it (including controls in nested fieldsets) with no JavaScript. The legend is rendered as a styleable div rather than a native legend (which cannot 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.

Base UI Fieldset example (Phoenix headless)

Billing details

Company

Tax ID

heex

<.fieldset
  id="baseui-fieldset-hero"
  class="flex w-full max-w-64 flex-col gap-4"
  legend_class="border-b border-neutral-950 text-base font-bold text-neutral-950 dark:border-white dark:text-white"
>
  <:legend>Billing details</:legend>

  <.field
    :let={f}
    id="baseui-fieldset-hero-company"
    label="Company"
    class="flex flex-col items-start gap-1"
    label_class="text-sm font-bold text-neutral-950 dark:text-white"
  >
    <input
      id={f.id}
      name={f.name}
      placeholder="Enter company name"
      aria-describedby={f.describedby}
      class="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
    />
  </.field>

  <.field
    :let={f}
    id="baseui-fieldset-hero-tax-id"
    label="Tax ID"
    class="flex flex-col items-start gap-1"
    label_class="text-sm font-bold text-neutral-950 dark:text-white"
  >
    <input
      id={f.id}
      name={f.name}
      placeholder="Enter fiscal number"
      aria-describedby={f.describedby}
      class="h-8 w-full border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:text-neutral-500 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white dark:placeholder:text-neutral-400"
    />
  </.field>
</.fieldset>

Parts & data attributes

The root is the native fieldset element itself; the legend is its only addressable part. Each carries a stable data-part / chelekom-fieldset* class you can target, plus a shared disabled state.

Part	data-part	State / ARIA	Purpose
Root	-	aria-labelledby, data-disabled	The native fieldset element; disabled cascades to every descendant control.
Legend	legend	data-disabled	A styleable div group label, associated to the root via aria-labelledby.

Accessibility

Follows the WAI-ARIA Authoring Practices grouping pattern: a native fieldset plus an aria-labelledby legend names the group for assistive tech, and the native disabled attribute disables every descendant control with no JavaScript required.

Attributes

Name	Type	Default	Values	Required	Description
`id`	`string`	—	—	Yes	Unique id; anchors the legend association
`disabled`	`boolean`	`false`	—	No	Natively disable every control in the group (also sets data-disabled)
`class`	`any`	—	—	No	Extra classes for the root
`legend_class`	`any`	—	—	No	Extra classes for the legend part
`rest`	`global`	—	—	No	—

Slots

Name	Required	Description
`legend`	No	The group label — a styleable <div> wired to the fieldset via aria-labelledby
`inner_block`	Yes	The grouped form controls

Option	Values
`--type`	`fieldset`
`--module`	A module name of your own

Fieldset