Checkbox

Import

import { Checkbox } from 'tuimorphic';

Basic Usage

<Checkbox label="Accept terms and conditions" />

Props

Prop	Type	Default	Description
`checked`	`boolean`	—	Whether the checkbox is checked (controlled)
`defaultChecked`	`boolean`	`false`	Default checked state (uncontrolled)
`onCheckedChange`	`(checked: boolean) => void`	—	Callback when checked state changes
`label`	`string`	—	Label text displayed next to checkbox
`disabled`	`boolean`	`false`	Whether the checkbox is disabled
`name`	`string`	—	Name attribute for forms
`value`	`string`	—	Value attribute for forms
`className`	`string`	—	Additional CSS class names
`ref`	`React.Ref<HTMLButtonElement>`	—	Forwarded ref to the button element

With Label

Accept terms and conditions

<Checkbox label="Accept terms and conditions" />

Checkbox Group

Option AOption BOption C

<div className="space-y-2">
  <Checkbox label="Option A" />
  <Checkbox label="Option B" />
  <Checkbox label="Option C" />
</div>

Disabled States

Disabled unchecked╳Disabled checked

<Checkbox label="Disabled unchecked" disabled />
<Checkbox label="Disabled checked" disabled checked />

Controlled Checkbox

Controlled checkbox

State: Unchecked

const [checked, setChecked] = useState(false);
 
<Checkbox
  label="I agree to the terms"
  checked={checked}
  onCheckedChange={setChecked}
/>

Multiple Selections Example

For multiple selections, manage state manually:

const [selected, setSelected] = useState<string[]>(['notifications']);
 
const toggleOption = (option: string) => {
  setSelected((prev) =>
    prev.includes(option)
      ? prev.filter((o) => o !== option)
      : [...prev, option]
  );
};
 
<fieldset>
  <legend>Notification Preferences</legend>
  <Checkbox
    label="Email notifications"
    checked={selected.includes('email')}
    onCheckedChange={() => toggleOption('email')}
  />
  <Checkbox
    label="Push notifications"
    checked={selected.includes('notifications')}
    onCheckedChange={() => toggleOption('notifications')}
  />
  <Checkbox
    label="SMS notifications"
    checked={selected.includes('sms')}
    onCheckedChange={() => toggleOption('sms')}
  />
</fieldset>

Visual Design

The checkbox uses a terminal-style indicator:

Unchecked: [ ]
Checked: [X]

Key	Action
`Space`	Toggle checked state
`Enter`	Toggle checked state
`Tab`	Move focus to next element

Accessibility

Built on Base UI's accessible checkbox primitive
Proper ARIA attributes for screen readers
Keyboard accessible
Label properly associated with checkbox

Styling

Variable	Description
`--theme-border`	Checkbox border color
`--theme-text`	Indicator and label color
`--theme-focused-border`	Border color when focused

Radio - For single selection from multiple options
Toggle - For on/off switches