ComponentsFormCheckbox

Checkbox

6 colors · 3 sizes · card style · CheckboxGroup with select all

StatesColorsSizesCard styleCheckboxGroupSelect all

States

Live preview

Unchecked, checked, indeterminate, disabled, and disabled checked

App.tsx

tsx

1<Checkbox label="Unchecked" />
2<Checkbox label="Checked" defaultChecked />
3<Checkbox label="Indeterminate" indeterminate />
4<Checkbox label="Disabled" disabled />
5<Checkbox label="Disabled checked" disabled defaultChecked />

Colors

Live preview

Six color variants — default, secondary, success, warning, error, and info

App.tsx

tsx

1<Checkbox label="Default (primary)" color="default"   defaultChecked />
2<Checkbox label="Secondary"         color="secondary" defaultChecked />
3<Checkbox label="Success"           color="success"   defaultChecked />
4<Checkbox label="Warning"           color="warning"   defaultChecked />
5<Checkbox label="Error"             color="error"     defaultChecked />
6<Checkbox label="Info"              color="info"      defaultChecked />

Sizes

Live preview

sm, md (default), and lg checkbox sizes

Small

Medium (default)

Large

App.tsx

tsx

1<Checkbox label="Small"            size="sm" defaultChecked />
2<Checkbox label="Medium (default)" size="md" defaultChecked />
3<Checkbox label="Large"            size="lg" defaultChecked />

Shape

Live preview

Square (rounded corners, default) or circle shape

Square (default)

Circle

App.tsx

tsx

1<Checkbox label="Square (default)" shape="square" defaultChecked />
2<Checkbox label="Circle"           shape="circle" defaultChecked />

With helper + error

Live preview

Helper text shown below the label; error state with message and required indicator

Email notificationsReceive product updates and announcements

Accept terms and conditions

You must accept the terms to continue

App.tsx

tsx

1<Checkbox
2  label="Email notifications"
3  helperText="Receive product updates and announcements"
4  defaultChecked
5/>
6 
7{/* Controlled with error */}
8const [terms, setTerms] = useState(false)
9 
10<Checkbox
11  label="Accept terms and conditions"
12  required
13  error={!terms}
14  errorText="You must accept the terms to continue"
15  checked={terms}
16  onChange={e => setTerms(e.target.checked)}
17/>

Card style

Live preview

Bordered card layout — ideal for plan selection and feature toggles

Pro plan

$12/month · Unlimited projects · Priority support

Team plan

$49/month · Up to 10 members · Admin controls

Enterprise

Custom pricing · Unlimited members · SLA

Unavailable plan

This option is currently disabled

App.tsx

tsx

1const [plan, setPlan] = useState('pro')
2 
3<Checkbox
4  card
5  label="Pro plan"
6  description="$12/month · Unlimited projects · Priority support"
7  checked={plan === 'pro'}
8  onChange={() => setPlan('pro')}
9/>
10<Checkbox
11  card
12  label="Team plan"
13  description="$49/month · Up to 10 members · Admin controls"
14  checked={plan === 'team'}
15  onChange={() => setPlan('team')}
16/>
17<Checkbox
18  card
19  label="Enterprise"
20  description="Custom pricing · Unlimited members · SLA"
21  checked={plan === 'enterprise'}
22  onChange={() => setPlan('enterprise')}
23/>
24<Checkbox
25  card
26  label="Unavailable plan"
27  description="This option is currently disabled"
28  disabled
29/>

CheckboxGroup — select all

Live preview

Managed group with auto indeterminate state on the select-all parent

Selected: read, write

App.tsx

tsx

1const [permissions, setPermissions] = useState(['read', 'write'])
2 
3<CheckboxGroup
4  legend="User permissions"
5  selectAll
6  selectAllLabel="All permissions"
7  value={permissions}
8  onChange={setPermissions}
9>
10  <Checkbox value="read"   label="Read"   helperText="View all content" />
11  <Checkbox value="write"  label="Write"  helperText="Create and edit content" />
12  <Checkbox value="delete" label="Delete" helperText="Remove content permanently" />
13  <Checkbox value="admin"  label="Admin"  helperText="Full system access" />
14</CheckboxGroup>
15 
16<p>Selected: {permissions.join(', ') || 'none'}</p>

Checkbox props

Props

PropTypeDefaultDescription

labelReactNode—Label text shown next to the checkbox

helperTextstring—Helper text shown below the label

requiredbooleanfalseMarks as required — adds * to label

errorbooleanfalseError state — red border

errorTextstring—Error message shown when error=true

indeterminatebooleanfalseShows a dash instead of checkmark

cardbooleanfalseWraps the checkbox in a bordered card

descriptionstring—Description inside the card (card=true only)

size'sm' | 'md' | 'lg''md'Size of the checkbox

shape'square' | 'circle''square'Shape of the checkbox

disabledbooleanfalseDisables the checkbox

checkedboolean—Controlled checked state

defaultCheckedbooleanfalseUncontrolled initial checked state

onChangeReact.ChangeEventHandler<HTMLInputElement>—Change event callback

CheckboxGroup props

Props

PropTypeDefaultDescription

legendstring—Group label shown above the checkboxes

valuestring[]—Controlled selected values

onChange(value: string[]) => void—Callback fired when selection changes

selectAllbooleanfalseShows a select-all checkbox with auto indeterminate state

selectAllLabelstring'Select all'Label for the select all checkbox

size'sm' | 'md' | 'lg'—Size applied to all child checkboxes

childrenReactNode—Checkbox components with a value prop