Headless Fieldset

New version v0.0.9 🚀

An unstyled, fully accessible group for related form controls in Phoenix LiveView, a native <fieldset> that natively disables every control inside it, with a stylable legend wired via aria-labelledby. You bring the styling.

Installation:

mix mishka.ui.gen.headless fieldset

Source: View Source

Package: Mishka Chelekom

Tags:

Headless Base UI Accessible

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.

**Headless = bring your own design.** The example below is a faithful port of Base UI's own Fieldset demo. Copy it, then swap the classes for your design system - the behavior never changes.

Base UI Fieldset example (Phoenix headless)

Billing details

Company

Tax ID

<.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.

Headless Fieldset component props

Name	Type	Required	Description
id	string	Yes	Unique id; anchors the legend association.
disabled	boolean	No	Natively disables 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.
legend (slot)	slot	No	The group label - a styleable div wired to the fieldset via aria-labelledby.
inner_block (slot)	slot	Yes	The grouped form controls.

Fieldset CLI Arguments

Name	Type	Options	Recommended?
`--type`	string	fieldset	Yes
`--only`	string	fieldset	Yes
`--module`	string	Something	NO