Checkbox
A native checkbox for an independent yes/no choice that takes effect when the form is saved.
Examples
Label and description
<Checkbox name="expose" label="Expose tools to agents" checked />
<Checkbox
name="autoRoute"
label="Include in automatic routing"
description="The router can pick this server when the routing hint matches."
/>
<Checkbox label="Allow write tools" description="Turn on OAuth first." disabled />Indeterminate and invalid
Indeterminate for a select-all box when some rows are selected.
<Checkbox aria-label="Select all servers" indeterminate />
<Checkbox label="I understand this server can read my private repositories" invalid />Usage
import { Checkbox } from '@switchboard/ui'
<Checkbox name="expose" value="on" label="Expose tools to agents" checked={server.exposed} />Props
Every component also takes mix, for css() and mixins applied after its own style.
Checkbox
| Prop | Type | Default | Description |
|---|---|---|---|
| label | RemixNode | – | Inline label to the right. Omit when a Field or table header names the box. |
| description | RemixNode | – | Secondary line under the label. |
| invalid | boolean | – | aria-invalid and a danger outline. Defaults to the Field error. |
| indeterminate | boolean | – | Shows a dash and sets aria-checked="mixed". |
| checked | boolean | – | Initially checked. |
Also accepts every <input> attribute except type; mix goes on the input, class on the label. Reads Field context.
Accessibility
- A native <input type="checkbox"> inside its <label>: Space toggles it and the whole row is clickable, without JavaScript.
- The description is inside the label, so it is read as part of the name.
- Indeterminate sets aria-checked="mixed"; the dash is drawn in the on-accent colour, not by colour alone.
Guidance
Do
- Phrase the label as the thing that becomes true: "Expose tools to agents".
- Use a Switch when the change applies at once.
Don’t
- Use a single checkbox for two opposite options; use a RadioGroup.
- Write negative labels like "Don't route".