Default

What you get out of the box with this component:

Editable example
() => {
  const [checked, setChecked] = React.useState(false)
  return (
    <Checkbox
      id="abc123"
      label="Sign up for our email newsletter"
      checked={checked}
      onChange={() => setChecked(!checked)}
    />
  )
}
() => {
  const [checked, setChecked] = React.useState(false)
  return (
    <Checkbox
      id="abc123"
      label="Sign up for our email newsletter"
      checked={checked}
      onChange={() => setChecked(!checked)}
    />
  )
}

Disabled variant

To disable a checkbox, preventing user interaction, use the disabled prop.

Editable example
() => {
  const [checked, setChecked] = React.useState(false)
  return (
    <Checkbox
      id="abc123"
      label="The information I have provided is the truth and nothing but the truth."
      checked={checked}
      onChange={() => setChecked(!checked)}
      disabled
    />
  )
}
() => {
  const [checked, setChecked] = React.useState(false)
  return (
    <Checkbox
      id="abc123"
      label="The information I have provided is the truth and nothing but the truth."
      checked={checked}
      onChange={() => setChecked(!checked)}
      disabled
    />
  )
}

Size variants

We support three sizes (small, medium and large). The medium and large variants both have a "blue" selected color.

Use the large variant for selection of larger interface elements such as Cards.

Editable example
() => {
  const [checked, setChecked] = React.useState(false)
  return (
    <Stack gap="s">
      {["m", "l"].map((size) => (
          <Checkbox
            key={size}
            id="abc123"
            label="Sign up for our email newsletter"
            checked={checked}
            onChange={() => setChecked(!checked)}
            size={size}
          />
      ))}
    </Stack>
  )
}
() => {
  const [checked, setChecked] = React.useState(false)
  return (
    <Stack gap="s">
      {["m", "l"].map((size) => (
          <Checkbox
            key={size}
            id="abc123"
            label="Sign up for our email newsletter"
            checked={checked}
            onChange={() => setChecked(!checked)}
            size={size}
          />
      ))}
    </Stack>
  )
}

Theming

We also supports a dark theme for all variants:

Editable example
() => {
  const [checked, setChecked] = React.useState(false)

  return (
    <Card theme={CardTheme.Dark}>
      <div className="space-inset-m">
        <h3>Packing list</h3>
        <Checkbox
          size="medium"
          theme="dark"
          id="abc123"
          label="Torch"
          checked={checked}
          onChange={() => setChecked(!checked)}
        />
      </div>
    </Card>
  )
}
() => {
  const [checked, setChecked] = React.useState(false)

  return (
    <Card theme={CardTheme.Dark}>
      <div className="space-inset-m">
        <h3>Packing list</h3>
        <Checkbox
          size="medium"
          theme="dark"
          id="abc123"
          label="Torch"
          checked={checked}
          onChange={() => setChecked(!checked)}
        />
      </div>
    </Card>
  )
}

Best practices

• Use a RadioButtonGroup when only one option can be selected from a list
• For turning a single option on or off, use a Toggle
• For selecting one item from a set of options with small labels or icons, use a SegmentedControl

Accessibility

• A label is always required to support users with screen-readers; if you don't want it to be visible, use the labelHidden prop