SOROUSH.DESIGN
Design SystemMarkdownStyled System

Checkbox

A binary toggle control. Supports controlled and uncontrolled usage, six semantic color palettes, two sizes, indeterminate state, and custom icons.

Source

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>