import {
Meta,
Canvas,
Controls,
} from '@storybook/addon-docs/blocks';
import * as CheckboxStories from './checkbox.stories';
# Checkbox
Checkboxes let users enable an option or select one or more items from a list.
For guidance on when to use Checkbox vs Toggle vs Radio vs Select, see [Guidelines/Selection Controls](?path=/docs/guidelines-selection-controls--stories).
## Patterns
### Enable / disable an option
The primary use case. The label sits on the left and describes what enabling the option does. The checkbox sits on the right.
Label rules:
- Use a verb phrase: "Enable compression", "Allow public access", "Send notifications"
- The label describes the active (checked) state
- Avoid nouns alone: "Compression" or "Notifications" are ambiguous
### Multi-select in tables
The primary multi-select use case is row selection in a table. This is handled by `Table.MultiSelectableContent`, which manages the checkboxes internally — the Checkbox component is not used directly here.
The header checkbox controls the full selection: checking it selects all rows, unchecking it deselects all. When some rows are selected, the header checkbox enters the indeterminate state.
## States
All five visual states from left to right: unchecked, checked, indeterminate, disabled, disabled checked.
### Indeterminate
The indeterminate state indicates a partial selection: some children are checked, but not all. It appears on the header checkbox in a table when some rows are selected. It is never used as an initial or standalone state.
### Disabled
A disabled checkbox prevents the user from changing its state. Use when the option is unavailable due to permissions, dependencies, or system state. A not-allowed cursor informs the user that the action is unavailable.
When the reason for the disabled state is not obvious from context, add a tooltip to explain it.