Default

What you get out of the box with this component:

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

Disabled variant

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

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

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 (
    <div>
      {[CheckboxSize.Medium, CheckboxSize.Large].map((size) => (
          <Checkbox
            key={size}
            item={{id: "abc123", value: "abc123", label: "Sign up for our email newsletter"}}
            isSelected={checked}
            onChange={() => setChecked(!checked)}
            size={size}
          />
      ))}
    </div>
  )
}
() => {
  const [checked, setChecked] = React.useState(false)
  return (
    <div>
      {[CheckboxSize.Medium, CheckboxSize.Large].map((size) => (
          <Checkbox
            key={size}
            item={{id: "abc123", value: "abc123", label: "Sign up for our email newsletter"}}
            isSelected={checked}
            onChange={() => setChecked(!checked)}
            size={size}
          />
      ))}
    </div>
  )
}

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={CheckboxSize.Medium}
          theme={CheckboxTheme.Dark}
          item={{id: "abc123", value: "abc123", label: "Torch"}}
          isSelected={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={CheckboxSize.Medium}
          theme={CheckboxTheme.Dark}
          item={{id: "abc123", value: "abc123", label: "Torch"}}
          isSelected={checked}
          onChange={() => setChecked(!checked)}
        />
      </div>
    </Card>
  )
}

With multiple check boxes

You could make use of the toggleKey property to identify which item is being clicked, for cases where you don't want to define the onChange function in-line.

Editable example
() => {
  const [checked, setChecked] = React.useState(undefined)
  return (
    ["apples", "oranges", "pears"].map(item => (
      <Checkbox
        key={item}
        item={{id: item, value: "abc123", label: item}}
        isSelected={checked === item}
        onChange={setChecked}
        toggleKey={item}
      />
    )
  ))
}
() => {
  const [checked, setChecked] = React.useState(undefined)
  return (
    ["apples", "oranges", "pears"].map(item => (
      <Checkbox
        key={item}
        item={{id: item, value: "abc123", label: item}}
        isSelected={checked === item}
        onChange={setChecked}
        toggleKey={item}
      />
    )
  ))
}

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