Atlas

Fieldset

A vertical stack that gathers related fields into one group.

<x-atlas::fieldset>

The fieldset is a column flex container and nothing else. It takes no props: its whole job is to stack whatever you put inside it with one consistent gap, so a group of fields reads as a group without any margins of your own. 

<x-atlas::fieldset role="group" aria-labelledby="contact-legend">
    <x-atlas::legend id="contact-legend">Contact details</x-atlas::legend>

    <x-atlas::field>
        <x-atlas::label id="fs-name-label" for="fs-name">Name</x-atlas::label>
        <x-atlas::input id="fs-name" name="name" type="text" aria-labelledby="fs-name-label" autocomplete="name" />
    </x-atlas::field>

    <x-atlas::field>
        <x-atlas::label id="fs-email-label" for="fs-email">Email</x-atlas::label>
        <x-atlas::input id="fs-email" name="email" type="email" aria-labelledby="fs-email-label" autocomplete="email" />
    </x-atlas::field>
</x-atlas::fieldset>
Preview follows the site's light/dark mode. Open standalone →
Atlas renders an <atlas-fieldset> custom element, not a native <fieldset>. That means no grouping semantics and no cascading disabled — the two things a real fieldset gives you for free. Add role="group" (or role="radiogroup") and point aria-labelledby at the legend, as every example here does.

Grouping choices

Radios, checkboxes and toggles carry their own labels, so wrapping each one in a field would name the option twice and leave the question itself unnamed. Put them in a fieldset and let the legend ask the question. 

<x-atlas::fieldset role="radiogroup" aria-labelledby="plan-legend">
    <x-atlas::legend id="plan-legend">Billing period</x-atlas::legend>

    <x-atlas::radio.group>
        <x-atlas::radio name="billing_period" value="monthly" checked>Monthly</x-atlas::radio>
        <x-atlas::radio name="billing_period" value="yearly">Yearly, two months free</x-atlas::radio>
    </x-atlas::radio.group>
</x-atlas::fieldset>
Preview follows the site's light/dark mode. Open standalone →

Several groups

Once a form runs past six or seven fields, split it. Two or three fieldsets with honest legends let someone see what is being asked before they start typing, and give you a natural place to break a long form across steps later. 

<x-atlas::fieldset role="group" aria-labelledby="account-legend">
    <x-atlas::legend id="account-legend">Account</x-atlas::legend>

    <x-atlas::field>
        <x-atlas::label id="acct-email-label" for="acct-email" is-required>Email</x-atlas::label>
        <x-atlas::input id="acct-email" name="email" type="email" aria-labelledby="acct-email-label" required />
    </x-atlas::field>

    <x-atlas::field>
        <x-atlas::label id="acct-password-label" for="acct-password" is-required>Password</x-atlas::label>
        <x-atlas::input id="acct-password" name="password" type="password" aria-labelledby="acct-password-label" required />
    </x-atlas::field>
</x-atlas::fieldset>

<x-atlas::fieldset role="group" aria-labelledby="prefs-legend">
    <x-atlas::legend id="prefs-legend">Preferences</x-atlas::legend>

    <x-atlas::field>
        <x-atlas::label id="prefs-language-label" for="prefs-language">Language</x-atlas::label>
        <x-atlas::select id="prefs-language" name="language" aria-labelledby="prefs-language-label">
            <x-atlas::select.option value="en">English</x-atlas::select.option>
            <x-atlas::select.option value="nl">Nederlands</x-atlas::select.option>
        </x-atlas::select>
    </x-atlas::field>

    <x-atlas::checkbox name="newsletter" label="Send me the monthly newsletter" />
</x-atlas::fieldset>
Preview follows the site's light/dark mode. Open standalone →

Legend

The heading that names a fieldset.

Field

The wrapper that binds a label, a control and an error message into one form row.

Label

The name of a form control, with an optional required marker.

Input

A single-line text control, styled for every input type the browser offers.

Textarea

A multi-line text control that shares the input styling, with a resize handle you can lock down.

Error

The message that explains why a control was rejected, with a warning icon in front of it.

Select

A native select styled with Atlas input tokens, with a disabled placeholder option built in.

Checkbox

A checkbox with a styled indicator, an optional description and a card-like grouped layout.

Radio

A native radio button with a styled indicator, plus a group wrapper for the set it belongs to.

Toggle

A switch that turns something on or off immediately, implementing the full ARIA switch pattern in Alpine over a hidden checkbox.

Reference

<x-atlas::fieldset>

Slots

  • Name
    default
    Type
    slot
    Description
    A legend, then the fields in the group. Every child is spaced by the fieldset, so no margins of your own.