Forms & Inputs

Checkbox

Android-style checkbox with State × Selection × Size props. Supports Default, Pressed, Enabled, and Disabled states with exact Figma-spec ripple and fill colours.

V 1.0View in Storybook
Controls
State
Selection
Size
Label

Variants

SizeThe different sizes of checkbox component
size = Medium
size = Small
SelectionShow if the checkbox component is selected or not
Selection = False
Selection = True
StateThe different states of checkbox component
state = Default
state = Pressed
state = Enabled
state = disabled (unselected)
state = disabled (selected)
Selection List — CheckboxFull-width list items with checkbox controls. Click any item to toggle it.
Selection List — Radio ButtonSingle-select list with radio button controls. Click any item to select it.

Props

Name
Type
Default
state*
'default' | 'pressed' | 'enabled' | 'disabled'
'default'
selection*
boolean
false
size*
'sm' | 'md'
'sm'
onChange
(selected: boolean) => void
—
label
string
—

Code

import { Checkbox } from '@/src/components/Checkbox/Checkbox'
import { SelectionList } from '@/src/components/SelectionList/SelectionList'

// Standalone checkbox
<Checkbox
  state="default"     // default | pressed | enabled | disabled
  selection={false}   // boolean
  size="sm"           // sm | md
  onChange={(v) => console.log(v)}
/>

// Selection list (checkbox)
<SelectionList
  selectionType="checkbox"
  size="md"
  selected={['apple']}
  items={[
    { value: 'apple', label: 'Apple' },
    { value: 'mango', label: 'Mango' },
  ]}
  onChange={(sel) => console.log(sel)}
/>