Checkbox
A binary toggle control. Supports controlled and uncontrolled usage, six semantic color palettes, two sizes, indeterminate state, and custom icons.
Architecture: the root element is a <label> wrapping a visually-hidden <input type="checkbox">, an icon span, and optional label text. Clicking anywhere on the root (icon or text) toggles the checkbox. The native input handles all browser behaviour, form submission, and accessibility.
Examples
Default
<Checkbox color="default" size="md" aria-label="Checkbox" />
Checked
const args: Partial<CheckboxProps> = { checked: true, color: 'primary', 'aria-label': 'Checkbox' }
<Checkbox {...args} onChange={() => {}} />
Indeterminate
<Checkbox indeterminate color="primary" aria-label="Checkbox" />
With Label
<Checkbox color="primary">Accept terms and conditions</Checkbox>
States
Unchecked
Checked
Indeterminate
Disabled unchecked
Disabled checked
Disabled indeterminate
<Flex flexDirection="column" gap={2}>
{(
[
{ label: 'Unchecked', props: {} },
{ label: 'Checked', props: { checked: true, onChange: () => {} } },
{ label: 'Indeterminate', props: { indeterminate: true } },
{ label: 'Disabled unchecked', props: { disabled: true } },
{
label: 'Disabled checked',
props: { disabled: true, checked: true, onChange: () => {} },
},
{ label: 'Disabled indeterminate', props: { disabled: true, indeterminate: true } },
] as const
).map(({ label, props }) => (
<Flex key={label} flexDirection="row" alignItems="center" gap={2}>
<Typography variant="caption" color="secondary" width="10rem" flexShrink={0} m={0}>
{label}
</Typography>
<Checkbox color="primary" {...props}>
{label}
</Checkbox>
</Flex>
))}
</Flex>
Colors
default
primary
secondary
success
error
info
warning
<ColorSwatchRows
controls={(color) => (
<>
<Checkbox color={color} aria-label={`${color} unchecked`} />
<Checkbox color={color} checked onChange={() => {}} aria-label={`${color} checked`} />
<Checkbox color={color} indeterminate aria-label={`${color} indeterminate`} />
</>
)}
/>
Sizes
sm
md
lg
<Flex flexDirection="row" gap={4} alignItems="center">
{(['sm', 'md', 'lg'] as const).map((size) => (
<Flex key={size} flexDirection="column" alignItems="center" gap={1}>
<Checkbox size={size} color="primary" checked onChange={() => {}} aria-label={size} />
<Typography variant="caption" color="secondary" m={0}>
{size}
</Typography>
</Flex>
))}
</Flex>
Custom Icons
<Flex flexDirection="column" gap={2}>
<Checkbox
color="primary"
icon={<span style={{ fontSize: '1.2em' }}>☆</span>}
checkedIcon={<span style={{ fontSize: '1.2em' }}>★</span>}
>
Custom star icons (unchecked)
</Checkbox>
<Checkbox
color="primary"
checked
onChange={() => {}}
icon={<span style={{ fontSize: '1.2em' }}>☆</span>}
checkedIcon={<span style={{ fontSize: '1.2em' }}>★</span>}
>
Custom star icons (checked)
</Checkbox>
</Flex>