Checkbox · Orbex Sonar-DB Design System

Examples

Checked, with help, disabled

Include delivered

Notify the carrierAn email with the new delivery window.

Split by warehouse

Code

tsx

import { Checkbox } from '@orbex/sonar-components/checkbox'

export default function Examples() {
  return (
    <>
      <Checkbox label="Include delivered" defaultChecked />
      <Checkbox label="Notify the carrier" description="An email with the new delivery window." />
      <Checkbox label="Split by warehouse" disabled />
    </>
  )
}

Select all

All deliveries

Delivery 04-127C

Delivery 04-128A

Delivery 04-131B

Code

tsx

import { Checkbox } from '@orbex/sonar-components/checkbox'
import { useState } from 'react'

const deliveries = ['04-127C', '04-128A', '04-131B']

/* The parent checkbox shows a dash while some, not all, rows are chosen */
export default function SelectAll() {
  const [chosen, setChosen] = useState<string[]>(['04-127C'])
  const all = chosen.length === deliveries.length
  const toggle = (id: string) => setChosen((ids) => (ids.includes(id) ? ids.filter((other) => other !== id) : [...ids, id]))
  return (
    <div style={{ display: 'grid', gap: 10 }}>
      <Checkbox
        label="All deliveries"
        checked={all}
        indeterminate={chosen.length > 0 && !all}
        onChange={() => setChosen(all ? [] : deliveries)}
      />
      <div style={{ display: 'grid', gap: 10, paddingLeft: 28 }}>
        {deliveries.map((id) => (
          <Checkbox key={id} label={`Delivery ${id}`} checked={chosen.includes(id)} onChange={() => toggle(id)} />
        ))}
      </div>
    </div>
  )
}

Sizes, variants and states

Usage

Each checkbox is independent. For one choice among several, use a SegmentedControl or a select.
The indeterminate state is only shown: a click checks the box, and the app decides what that means for its items.

Do and don’t

DoCheckboxes for choices that are confirmed together, by a button after them.

Don’tA checkbox that changes something at once. That is a switch.

DoSelect all shows mixed while only some rows are chosen.

Don’tSelect all checked while a row is not: the two disagree.

Accessibility

Keyboard

Key	What it does
Tab	Moves focus to the checkbox.
Space	Checks or unchecks it.

Roles and attributes

Element or attribute	What it gives
`<input type="checkbox">`	Native: checked, unchecked and, through the indeterminate property, mixed.
`<label>`	Names the input and enlarges what can be clicked.
`aria-describedby`	Ties the help text to the input.

Notes

A native checkbox: Space toggles it, and the indeterminate state is announced as mixed.
The help text sits outside the label and is tied to the input with aria-describedby.

Use it

Each component is its own entry point with its own stylesheet, so an app loads only what it uses. The tokens and the cascade layers are set once for the app: see Installation.

tsx

import { Checkbox } from '@orbex/sonar-components/checkbox'
import '@orbex/sonar-components/checkbox.css'

API

Props of Checkbox
Prop	Type	Default
`label` Required What is being chosen.	`ReactNode`	—
`description` One line of help, read after the label.	`ReactNode`	—
`indeterminate` Shown as a dash: some, not all, of the items it governs are checked. Clicking it checks it.	`boolean`	`false`

Also takes every attribute of the native <input> , except type, and a ref to it.