switch
A native checkbox with switch semantics, wearing a track. Square, like everything else.
Example
Basic usage
<label><input type="checkbox" role="switch" checked /> Notifications</label>API
A switch is a native checkbox with the ARIA switch role. Checked, disabled, form participation, labeling, focus, events, and Space-key behavior remain native.
Mica-specific attributes
| Name | Type | Default | Description |
|---|---|---|---|
role="switch" | ARIA role | checkbox role | Selects Mica's switch track presentation and exposes on/off semantics to assistive technology. |
Content/markup contracts
| Content | Contract | Default | Description |
|---|---|---|---|
label | wrap the input or use for | — | Provides the switch's accessible name and click target. |
Styling
| State | Native source | Default | Description |
|---|---|---|---|
| Off | unchecked checkbox | initial | Muted track with the block at the start edge. |
| On | checked | false | Primary fill with the block at the end edge. |
Accessibility
The checkbox's native checked state supplies the accessible state — do not duplicate it with aria-checked. Safari is prototyping a native switch attribute; if it standardizes, this component will need even less.