Label

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

<x-atlas::label>

A label names one control, in bold, on its own line above it. It carries the whole label line: the name, a required marker, and anything else you put in the slot. Labels almost always live inside a field, which owns the spacing between the label and the control below it.

<x-atlas::field>
    <x-atlas::label for="company">Company name</x-atlas::label>
    <x-atlas::input id="company" name="company" type="text" />
</x-atlas::field>

# Required marker

is-required appends a red asterisk, hidden from assistive technology so it is not read as punctuation. It is a visual cue only — the control still needs its own required attribute, and the browser will not enforce anything without it. Mark the minority: if most fields on a form are required, badge the optional ones instead.

<x-atlas::field>
    <x-atlas::label for="vat-number" is-required>VAT number</x-atlas::label>
    <x-atlas::input id="vat-number" name="vat_number" type="text" placeholder="NL001234567B01" required />
</x-atlas::field>

<x-atlas::field>
    <x-atlas::label for="chamber-number">Chamber of Commerce number</x-atlas::label>
    <x-atlas::input id="chamber-number" name="chamber_number" type="text" />
</x-atlas::field>

# Badge on the label line

Anything in the slot renders after the label text, which is where a badge goes when a field needs a qualifier a word longer than an asterisk — optional, beta, restricted to a role.

<x-atlas::field>
    <x-atlas::label for="referral-code">
        Referral code
        <x-atlas::badge variant="outlined" color="secondary">Optional</x-atlas::badge>
    </x-atlas::label>
    <x-atlas::input id="referral-code" name="referral_code" type="text" />
</x-atlas::field>

<x-atlas::field>
    <x-atlas::label for="api-token">
        API token
        <x-atlas::badge color="danger">Admins only</x-atlas::badge>
    </x-atlas::label>
    <x-atlas::input id="api-token" name="api_token" type="password" />
</x-atlas::field>

# Pairing with the control

Atlas renders an <atlas-label> custom element rather than a native <label>, and nothing upgrades it in the browser. A for attribute therefore passes straight through to the markup without doing anything: clicking the label will not focus the control, and a screen reader will not announce the name.

Until that changes, give the label an id and point the control at it with aria-labelledby. Keeping for alongside it costs nothing and states the intent for whoever reads the template next.

<x-atlas::field>
    <x-atlas::label id="mobile-label" for="mobile">Mobile number</x-atlas::label>
    <x-atlas::input id="mobile" name="mobile" type="tel" aria-labelledby="mobile-label" placeholder="+31 6 12 34 56 78" />
</x-atlas::field>

# Related components

# Reference

# <x-atlas::label>

Slots