Atlas

Select

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

<x-atlas::select> 

<x-atlas::select name="plan" placeholder="Choose an option">
    <x-atlas::select.option value="starter">Starter</x-atlas::select.option>
    <x-atlas::select.option value="growth">Growth</x-atlas::select.option>
    <x-atlas::select.option value="enterprise">Enterprise</x-atlas::select.option>
</x-atlas::select>
Preview follows the site's light/dark mode. Open standalone →
The packaged view defaults placeholder to WordPress' two-argument __('Choose an option', 'atlas'), which is a TypeError against Laravel's translator. Outside WordPress, either override the view — as these docs do — or pass an explicit placeholder on every select.

Placeholder

The first option is always a disabled, selected placeholder. That is what keeps a select from silently submitting its first real option, so treat the placeholder as the prompt: name the choice being made rather than repeating the field label. 

<x-atlas::select name="country" placeholder="Select a country">
    <x-atlas::select.option value="nl">Netherlands</x-atlas::select.option>
    <x-atlas::select.option value="be">Belgium</x-atlas::select.option>
    <x-atlas::select.option value="de">Germany</x-atlas::select.option>
</x-atlas::select>
Preview follows the site's light/dark mode. Open standalone →

Preselected value

Marking an option selected overrides the placeholder — the browser honours the last selected option in the list. Reach for it when a form is editing something that already has a value. 

<x-atlas::select name="role" placeholder="Choose a role">
    <x-atlas::select.option value="viewer">Viewer</x-atlas::select.option>
    <x-atlas::select.option value="editor" selected>Editor</x-atlas::select.option>
    <x-atlas::select.option value="admin">Administrator</x-atlas::select.option>
</x-atlas::select>
Preview follows the site's light/dark mode. Open standalone →

Disabled

Attributes you set are merged onto the underlying elements, so disabled, required, multiple and name all behave natively. Disable a single option when the choice should stay visible but cannot be taken. 

<x-atlas::select name="region" placeholder="Choose a region" disabled>
    <x-atlas::select.option value="eu">Europe</x-atlas::select.option>
    <x-atlas::select.option value="us">United States</x-atlas::select.option>
</x-atlas::select>

<x-atlas::select name="tier" placeholder="Choose a tier">
    <x-atlas::select.option value="standard">Standard</x-atlas::select.option>
    <x-atlas::select.option value="premium" disabled>Premium (sold out)</x-atlas::select.option>
</x-atlas::select>
Preview follows the site's light/dark mode. Open standalone →

Invalid

invalid adds the error styling and aria-invalid="true" together. Pair it with field so the message underneath is announced with the control. 

<x-atlas::select name="shipping" placeholder="Choose a shipping method" invalid>
    <x-atlas::select.option value="standard">Standard</x-atlas::select.option>
    <x-atlas::select.option value="express">Express</x-atlas::select.option>
</x-atlas::select>
Preview follows the site's light/dark mode. Open standalone →

Field

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

Input

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

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.

Reference

<x-atlas::select>

  • Name
    placeholder
    Type
    string
    Default
    default: Choose an option
    Description
    Label of the disabled option rendered first. It is always present, so a select always opens on a prompt rather than on a real value.
  • Name
    invalid
    Type
    bool
    Default
    default: false
    Description
    Applies the invalid styling and sets aria-invalid="true".

Slots

  • Name
    default
    Type
    slot
    Description
    The options. Write <code>&lt;x-atlas::select.option&gt;</code> or plain <code>&lt;option&gt;</code> elements — both work.

<x-atlas::select.option>

  • Name
    value
    Type
    string
    Description
    The submitted value. Attributes such as selected and disabled pass straight through to the option element.

Slots

  • Name
    default
    Type
    slot
    Description
    The option label.