Atlas

Radio

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

<x-atlas::radio> 

<x-atlas::radio.group>
    <x-atlas::radio name="delivery" value="standard">Standard delivery</x-atlas::radio>
    <x-atlas::radio name="delivery" value="express">Express delivery</x-atlas::radio>
    <x-atlas::radio name="delivery" value="pickup">Collect in store</x-atlas::radio>
</x-atlas::radio.group>
Preview follows the site's light/dark mode. Open standalone →

Unlike checkbox and toggle, the radio is a real native input with no Alpine behind it. The input is visually hidden and the indicator next to it is styled from the input's own :checked, :hover and :disabled states, so browser roving-focus and arrow-key navigation come for free.

Preselected option

Radios cannot be cleared once chosen, so a group with no default traps the reader on their first click. Set checked on the safest option unless the choice genuinely has no default. 

<x-atlas::radio.group>
    <x-atlas::radio name="invoicing" value="monthly" checked>Monthly</x-atlas::radio>
    <x-atlas::radio name="invoicing" value="quarterly">Quarterly</x-atlas::radio>
    <x-atlas::radio name="invoicing" value="yearly">Yearly</x-atlas::radio>
</x-atlas::radio.group>
Preview follows the site's light/dark mode. Open standalone →

Disabled option

disabled dims the row and takes the input out of the tab order. Prefer it over removing the option when the reader needs to know the option exists. 

<x-atlas::radio.group>
    <x-atlas::radio name="tier" value="standard" checked>Standard</x-atlas::radio>
    <x-atlas::radio name="tier" value="premium">Premium</x-atlas::radio>
    <x-atlas::radio name="tier" value="enterprise" disabled>Enterprise (contact sales)</x-atlas::radio>
</x-atlas::radio.group>
Preview follows the site's light/dark mode. Open standalone →

Grouping

atlas::radio.group only stacks its children — it holds no state and passes nothing down. The shared name on each radio is what makes a group a group, and it must be repeated on every option. 

<x-atlas::radio.group>
    <x-atlas::radio name="size" value="s" checked>Small</x-atlas::radio>
    <x-atlas::radio name="size" value="m">Medium</x-atlas::radio>
</x-atlas::radio.group>

<x-atlas::radio.group>
    <x-atlas::radio name="finish" value="matte" checked>Matte</x-atlas::radio>
    <x-atlas::radio name="finish" value="gloss">Gloss</x-atlas::radio>
</x-atlas::radio.group>
Preview follows the site's light/dark mode. Open standalone →
The group wrapper carries no role="radiogroup" and no accessible name. Add role="radiogroup" plus an aria-label or aria-labelledby yourself, or wrap the group in field with a legend, so the question is announced along with the options.

Checkbox

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

Toggle

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

Select

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

Field

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

Reference

<x-atlas::radio>

  • Name
    name
    Type
    string
    Default
    default: null
    Description
    Shared name that ties the radios of one group together. Radios without a matching name are not mutually exclusive.
  • Name
    value
    Type
    string
    Default
    default: null
    Description
    The value submitted when this radio is chosen.
  • Name
    checked
    Type
    bool
    Default
    default: false
    Description
    Marks this radio as the initially chosen one.
  • Name
    disabled
    Type
    bool
    Default
    default: false
    Description
    Disables the input and dims the row.
  • Name
    id
    Type
    string
    Default
    default: auto
    Description
    Id used to tie the label to the input. Generated with uniqid() when omitted.

Slots

  • Name
    default
    Type
    slot
    Description
    The label text, wrapped in the clickable label element.

<x-atlas::radio.group>

Slots

  • Name
    default
    Type
    slot
    Description
    The radios of one group. Presentation only — it stacks them and carries no state.