Checkbox

Checkbox is a user interface control that enables users to toggle between checked, unchecked, and indeterminate states

Anatomy

Import and assemble the component:

1import { Checkbox } from "@raystack/apsara";
2

3<Checkbox />

API Reference

Prop

Type

Examples

States

The Checkbox component supports multiple states to represent different selection conditions:

  • Unchecked: Default state
  • Checked: Selected state
  • Indeterminate: Partial selection state
  • Disabled: Disabled state
1<Checkbox />

Accessibility

  • Follows the WAI-ARIA Checkbox pattern
  • Supports keyboard activation with Space key
  • Uses aria-checked to indicate state (checked, unchecked, indeterminate)
  • Associates with labels via id and htmlFor attributes