Checkbox
V 1.0View in Storybook
Three-state checkbox (selected / indeterminate / unselected) at two sizes.
Playground
URL
https://design-system-ashu.vercel.app/iframe.html?id=components-checkbox--playground&viewMode=story&args=state%3Aselected%3Bsize%3Asm%3Bdisabled%3A%21false%3Blabel%3AWrite+your+label+text+here%3Bsubtext%3AThis+space+is+for+subtextCode
<Checkbox
state="selected"
size="sm"
disabled={false}
label="Write your label text here"
subtext="This space is for subtext"
/>Props
| Name | Type | Default |
|---|---|---|
state | 'unselected' | 'selected' | 'indeterminate' | 'selected' |
size | 'sm' | 'lg' | 'sm' |
disabled | boolean | false |
label | string | 'Write your label text here' |
subtext | string | 'This space is for subtext' |
Usage guidelines
When to use
- Use for multi-select lists where more than one option can be chosen simultaneously.
- Use the indeterminate state for a parent checkbox that controls a partially selected group.
- Pair with a label and optional subtext to clarify what the selection means.
When not to use
- Don't use when only one option can be selected — use Radio instead.
- Avoid pre-selecting checkboxes for consent or opt-in scenarios.
- Don't use a standalone checkbox without a visible label.