Home

Button Component

Tooltip Component

Toggle Component

Checkbox Component

Icon Component

KPI Card Component

Tag Component

Badge Component

Chip Component

TextInput Component

Dropdown Input Component

TextArea Component

PasswordInput Component

Side Panel Component

Filter Panel (Prototype)

Tabs Component

Segment Component

Avatar Component

Loading Component

Calendar Component

Table Component

Chart Component

Checkbox Component Playground

OPS Design System checkbox – unchecked, checked, indeterminate, disabled (no focus state)

Props

Size

smallmediumlarge

Small 12px, Medium 16px, Large 20px (Figma)

State

UncheckedCheckedIndeterminate

Label

Optional. Label typography scales with size (Figma 39-15362).

Disabled

Preview

Interactive checkbox (medium, state: false)

Code

<Checkbox checked={false} onCheckedChange={(value) => { /* handle change */ }} />

With label (Figma 39-15362)

Checkbox LabelCheckbox LabelCheckbox Label

All three sizes

Small (12px)

Medium (16px)

Large (20px)

All states (medium)

Unchecked

Checked

Indeterminate

Disabled

Checked + Disabled

Indeterminate + Disabled

CheckboxGroup with heading (Figma 39-15370)

Group Heading

Checkbox LabelCheckbox LabelOption AOption BOption C

Use CheckboxGroup with groupHeading to group multiple checkboxes under a single heading (8px gap).