Checkbox

A styled checkbox input with custom visual appearance. Built on native HTML checkbox for full accessibility support.

Props

Checkbox

Prop	Type	Required	Default	Description
checked	boolean	Yes	-	Whether the checkbox is checked
onClick	() => void	Yes	-	Called when checkbox is toggled
size	Size	Yes	-	"small" (16px), "medium" (20px), "large" (24px)

Also accepts standard HTML input attributes.

StaticCheckbox

Prop	Type	Required	Default	Description
checked	boolean	Yes	-	Whether the checkbox appears checked
size	Size	Yes	-	"small", "medium", "large"

Sizes

small

medium

large

<Checkbox size="small" checked={checked} onClick={toggle} />
<Checkbox size="medium" checked={checked} onClick={toggle} />
<Checkbox size="large" checked={checked} onClick={toggle} />

States

unchecked

checked

const [checked, setChecked] = useState(false);

<Checkbox
  size="medium"
  checked={checked}
  onClick={() => setChecked(!checked)}
/>

StaticCheckbox

Use StaticCheckbox when you need just the visual appearance without the underlying <input> element. Useful when the checkbox is part of a larger interactive component.

// Visual only - no input element
<StaticCheckbox size="medium" checked={isSelected} />

// Used within a custom list item
<ListButtonItem
  headline="Option"
  addOn={<StaticCheckbox size="medium" checked={selected} />}
  onClick={toggleSelection}
/>

With label

Checkboxes are typically paired with labels for better UX:

<Row gap="small" align="center">
  <Checkbox
    size="medium"
    checked={agreed}
    onClick={() => setAgreed(!agreed)}
  />
  <Span>I agree to the terms and conditions</Span>
</Row>

Accessibility

Uses native <input type="checkbox"> for full keyboard and screen reader support
Visual checkbox is layered over the hidden input
Focus ring appears on keyboard navigation
Press animation provides tactile feedback
aria-checked attribute reflects current state