7onicDESIGN SYSTEM

Checkbox

Checkbox is a form control for toggling options on and off. Use it standalone or group multiple checkboxes together.

3
Sizes
3
Radius
3
States
Radix
Base

Playground

Preview
D
Size
Color
Weight
Radius
Checked
Items
Options
<Checkbox
  label="Email"
/>

Sizes

sm
Box14px
Icon10px
Font12px
Gap6px
Click24px
default
Box16px
Icon12px
Font14px
Gap8px
Click32px
lg
Box20px
Icon14px
Font16px
Gap10px
Click36px

Features

With Field

Combine with the Field component to automatically inherit disabled state.

<Field>
  <Field.Label>Notifications</Field.Label>
  <div className="flex flex-col gap-2">
    <Checkbox defaultChecked label="Email" />
    <Checkbox label="Push" />
    <Checkbox label="SMS" />
  </div>
</Field>
<Field>
  <Field.Label>Notifications</Field.Label>
  <div className="flex gap-6">
    <Checkbox defaultChecked label="Email" />
    <Checkbox label="Push" />
    <Checkbox label="SMS" />
  </div>
</Field>

States

Unchecked
Checked
Indeterminate
Disabled
Disabled On
<Checkbox />
<Checkbox defaultChecked />
<Checkbox checked="indeterminate" />
<Checkbox disabled />
<Checkbox disabled defaultChecked />

API

Props

checkedundefined
boolean | "indeterminate"

Checked state for controlled mode

defaultCheckedundefined
boolean

Initial checked state for uncontrolled mode

onCheckedChangeundefined
(checked: boolean | "indeterminate") => void

Callback on state change

size"default"
"sm" | "default" | "lg"

Checkbox size (14/16/20px)

radius"sm"
"none" | "sm" | "md"

Border radius (none: 0px / sm: 2px / md: 4px)

weight"bold"
"thin" | "bold"

Border thickness (thin: 1px / bold: 2px)

color"default"
"default" | "primary"

Fill color for checked/indeterminate state

labelundefined
string

Checkbox label text

disabledundefined
boolean

Disabled state

requiredundefined
boolean

Required field

nameundefined
string

Form name attribute

value"on"
string

Form value attribute

Anatomy

1
2
3
4
I agree
statechecked · unchecked · indeterminate
1
Root
Flex container
2
Box
Checkbox body
3
Checkmark
Shown when checked
4
Label
Option text

Best Practices

✓

Do

  • ✓Use with clear labels
  • ✓Use for multi-select scenarios
  • ✓Use indeterminate for group select-all
  • ✓Combine with Field for required items
✕

Don't

  • ✗Don't use Checkbox for exclusive selection (use Radio)
  • ✗Use Switch for immediate-effect toggles
  • ✗Don't use without a label
  • ✗Consider Select for too many options

Accessibility

Keyboard

SpaceToggle check
TabMove focus

ARIA Attributes

  • role="checkbox" Auto-applied
  • aria-checked true/false/mixed
  • Focus indicator
  • label expands click area