Atlas

Checkbox

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

<x-atlas::checkbox> 

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

The checkbox is not a bare native input. Alpine holds a checked value on the wrapper, which carries role="checkbox", aria-checked and tabindex="0"; the real <input type="checkbox"> is hidden and bound with x-model, so it is what a form actually submits. Click, Space and Enter all toggle it.

Checked

checked seeds the Alpine value rather than the input's attribute, so it survives toggling and re-rendering. Use it for the option most readers will leave as it is. 

<x-atlas::checkbox name="analytics" label="Anonymous usage statistics" checked />
<x-atlas::checkbox name="marketing" label="Marketing emails" />
Preview follows the site's light/dark mode. Open standalone →

With a description

A description is what switches the layout: the checkbox becomes a full-width bordered card that tints while checked. Reach for it when the options are the substance of the screen — plan features, add-ons, permissions — and leave it off for a single consent tick. 

<x-atlas::checkbox
    name="plan-support"
    label="Priority support"
    description="Answers within four working hours, and a named contact for escalations."
    checked
/>
<x-atlas::checkbox
    name="plan-backups"
    label="Off-site backups"
    description="Nightly snapshots kept for thirty days in a second data centre."
/>
Preview follows the site's light/dark mode. Open standalone →

Indicator icon

The indicator reveals its icon while checked. A tick is right for accept-style choices; a cross reads better where ticking something removes or excludes it. 

<x-atlas::checkbox name="terms" label="I accept the terms" checked />
<x-atlas::checkbox name="exclude" label="Exclude from the export" icon="fas-xmark" checked />
Preview follows the site's light/dark mode. Open standalone →

Several options

Every checkbox creates its own Alpine scope, so there is no shared group state to coordinate them. Give each one a distinct name. 

<x-atlas::checkbox name="hosting" label="Hosting" checked />
<x-atlas::checkbox name="maintenance" label="Maintenance" />
<x-atlas::checkbox name="monitoring" label="Monitoring" />
Preview follows the site's light/dark mode. Open standalone →
The hidden input carries no value attribute, so a checked box submits the browser default of on. That makes array names such as services[] useless — every entry would read on. Until the view accepts a value prop, use one name per option. The invalid and variant props are likewise accepted but unused by the current view.

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.

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

  • Name
    label
    Type
    string
    Default
    default: Label
    Description
    The visible label text.
  • Name
    description
    Type
    string
    Description
    Supporting line under the label. Setting it also switches the checkbox to the bordered, full-width card layout.
  • Name
    name
    Type
    string
    Default
    default: default-checkbox
    Description
    Name of the hidden input that is actually submitted. Give every checkbox its own.
  • Name
    checked
    Type
    bool
    Default
    default: false
    Description
    Initial checked state.
  • Name
    disabled
    Type
    bool
    Default
    default: false
    Description
    Disables the input.
  • Name
    icon
    Type
    string
    Default
    default: atlas-check-regular-full
    Description
    Icon shown inside the indicator while checked.
  • Name
    invalid
    Type
    bool
    Default
    default: false
    Description
    Accepted but currently unused by the view — it renders no invalid styling.
  • Name
    variant
    Type
    string
    Description
    Accepted but currently unused by the view; the card layout is triggered by <code>description</code> instead.

<x-atlas::checkbox.indicator>

  • Name
    icon
    Type
    string
    Default
    default: —
    Description
    Icon to reveal while checked. Passed from the parent checkbox.