Stepwise UI

Checkbox

Squircle checkbox in three sizes. Supports checked, indeterminate, and disabled states. Works controlled or uncontrolled. Use indeterminate for parent checkboxes in a tree selection.

Installation

npx stepwise-ui add checkbox

States

import { Checkbox } from '@/components/stepwise/checkbox'

<Checkbox label="Unchecked" />
<Checkbox label="Checked" defaultChecked />
<Checkbox label="Indeterminate" indeterminate />

Sizes

<Checkbox size="sm"      label="Small"   defaultChecked />
<Checkbox size="default" label="Default" defaultChecked />
<Checkbox size="lg"      label="Large"   defaultChecked />

Group

Manage a set of checkboxes with a Set in local state. Each checkbox is a controlled component.
const [selected, setSelected] = useState<Set<string>>(new Set(['Notifications']))

const toggle = (item: string) => {
  const next = new Set(selected)
  next.has(item) ? next.delete(item) : next.add(item)
  setSelected(next)
}

{items.map(item => (
  <Checkbox
    key={item}
    label={item}
    checked={selected.has(item)}
    onChange={() => toggle(item)}
  />
))}

Indeterminate

Pass indeterminate to show the dash state - useful for a "select all" checkbox when some items are selected. The indeterminate prop overrides the visual even if checked is true.
const allChecked = selected.size === items.length
const someChecked = selected.size > 0 && selected.size < items.length

<Checkbox
  label="Select all"
  checked={allChecked}
  indeterminate={someChecked}
  onChange={toggleAll}
/>
{items.map(item => (
  <Checkbox
    key={item}
    label={item}
    checked={selected.has(item)}
    onChange={() => toggle(item)}
  />
))}

Disabled

<Checkbox label="Unchecked disabled" disabled />
<Checkbox label="Checked disabled" defaultChecked disabled />
<Checkbox label="Indeterminate disabled" indeterminate disabled />

Props

PropTypeDescription
size
"sm" | "default" | "lg"
14 / 18 / 22 px. Default: "default".
label
string
Text label rendered next to the checkbox.
checked
boolean
Controlled checked state.
defaultChecked
boolean
Initial state when uncontrolled.
indeterminate
boolean
Shows dash. Overrides the visual regardless of checked.
disabled
boolean
40% opacity, blocks interaction.
onChange
(e: ChangeEvent) => void
Change handler - receives the native event.