Atlas

Legend

The heading that names a fieldset.

<x-atlas::legend>

The legend names a fieldset. It takes no props and applies one thing: the large type size, so the group name outranks the labels underneath it. Use it nowhere else — outside a fieldset it is just big text with no meaning attached. 

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

    <x-atlas::field>
        <x-atlas::label id="legend-company-label" for="legend-company">Trading name</x-atlas::label>
        <x-atlas::input id="legend-company" name="company" type="text" aria-labelledby="legend-company-label" />
    </x-atlas::field>

    <x-atlas::field>
        <x-atlas::label id="legend-vat-label" for="legend-vat">VAT number</x-atlas::label>
        <x-atlas::input id="legend-vat" name="vat" type="text" aria-labelledby="legend-vat-label" />
    </x-atlas::field>
</x-atlas::fieldset>
Preview follows the site's light/dark mode. Open standalone →
This renders an <atlas-legend> custom element, not a native <legend>, so nothing connects it to its group automatically. Give it an id and reference that from the fieldset's aria-labelledby.

As the question

Where the group is a single choice, write the legend as the question the options answer. That is what a screen reader reads before each option, so "How should we deliver this?" leaves the listener better placed than "Delivery". 

<x-atlas::fieldset role="radiogroup" aria-labelledby="delivery-legend">
    <x-atlas::legend id="delivery-legend">How should we deliver this?</x-atlas::legend>

    <x-atlas::radio.group>
        <x-atlas::radio name="delivery" value="post" checked>By post</x-atlas::radio>
        <x-atlas::radio name="delivery" value="email">By email</x-atlas::radio>
        <x-atlas::radio name="delivery" value="collect">I will collect it</x-atlas::radio>
    </x-atlas::radio.group>
</x-atlas::fieldset>
Preview follows the site's light/dark mode. Open standalone →

As a document heading

A legend is styled text, not a heading element, so it never appears in the page outline that screen-reader users navigate by. On a long settings page where the groups are the structure, nest a real heading inside the legend and label the fieldset from that. 

<x-atlas::fieldset role="group" aria-labelledby="payment-heading">
    <x-atlas::legend>
        <x-atlas::heading :level="3" id="payment-heading">Payment</x-atlas::heading>
    </x-atlas::legend>

    <x-atlas::field>
        <x-atlas::label id="legend-card-label" for="legend-card">Name on card</x-atlas::label>
        <x-atlas::input id="legend-card" name="card_name" type="text" aria-labelledby="legend-card-label" autocomplete="cc-name" />
    </x-atlas::field>
</x-atlas::fieldset>
Preview follows the site's light/dark mode. Open standalone →

Fieldset

A vertical stack that gathers related fields into one group.

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.

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::legend>

Slots

  • Name
    default
    Type
    slot
    Description
    The group name. A few words, phrased as a heading or a question.