Checkbox
A boolean control that lets users toggle between checked and unchecked states. Supports an optional indeterminate visual for parent-level selections.
1<Checkbox label="Remember me" />
2
Usage
1import { Checkbox } from "atlas";
2
3<Checkbox
4 label="Remember me"
5 checked={checked}
6 onChange={setChecked}
7/>
8
Examples
Default
The default
Checkbox renders unchecked with a label and no description.1<Checkbox label="Remember me" />
2
With description
Pass a
description string to add helper text below the label. This is useful for explaining what the checkbox controls or any side effects of enabling it.1<Checkbox
2 label="Email notifications"
3 description="Receive emails about account activity and security alerts."
4 checked={true}
5/>
6
Terms
Checkboxes work well for explicit consent flows. Pair a clear
label with a description that spells out what the user is agreeing to.1<Checkbox
2 label="Accept terms and conditions"
3 description="By checking this box you agree to our terms of service."
4/>
5
Indeterminate
Set
indeterminate to display a dash instead of a checkmark. This is typically used on a "select all" checkbox when only some of its children are checked.1<Checkbox label="Select all" indeterminate />
2
Disabled
Set
disabled to prevent interaction. The checkbox’s opacity is reduced to signal that it is inactive.1<Checkbox label="Disabled checked" checked disabled />
2
API Reference
| Prop | Type | Default |
|---|---|---|
| checked | boolean | false |
| indeterminate | boolean | false |
| label | string | - |
| description | string | - |
| disabled | boolean | false |
| onChange | (checked: boolean) => void | - |