Logoapsara
DocumentationExamples
CheckboxCheckbox is a user interface control that enables users to toggle between checked, unchecked, and indeterminate states
Radix UIAPI Reference
Preview
Installation
Install the component from your command line. 
npm install @raystack/apsara
Usage
Controlled Component
You can control the checkbox state using the checked and onCheckedChange props: 
const [checked, setChecked] = useState(false);

<Checkbox 
  checked={checked}
  onCheckedChange={(value) => setChecked(value)}
/>
Indeterminate State
The indeterminate state is useful for representing partial selection, commonly used in parent checkboxes: 
const [checked, setChecked] = useState<boolean | 'indeterminate'>('indeterminate');

<Checkbox 
  checked={checked}
  onCheckedChange={(value) => setChecked(value)}
/>
Props
The Checkbox component accepts the following props:
  • checked: The controlled state of the checkbox (boolean | "indeterminate")
  • defaultChecked: The default state when initially rendered (boolean | "indeterminate")
  • onCheckedChange: Event handler called when the state changes ((checked: boolean | "indeterminate") => void)
  • disabled: When true, prevents the user from interacting with the checkbox (boolean)
Anatomy
Import all parts and piece them together. 
import { Checkbox } from '@raystack/apsara/v1'

// Basic usage
<Checkbox />

// Checked state
<Checkbox checked={true} />

// Indeterminate state
<Checkbox checked="indeterminate" />

// Disabled state
<Checkbox disabled />
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
loading...