Checkbox
Form ControlsStable
Checkbox component for selecting multiple options. Supports indeterminate state and is built on Radix UI.
Quick Import
import { Checkbox } from "@cohere-ai/waypoint-ui/checkbox";Live Preview
Loading Checkbox...
Props
| Name | Type | Default | Description |
|---|---|---|---|
checked | boolean | 'indeterminate' | - | Controlled checked state |
defaultChecked | boolean | - | Default checked state |
onCheckedChange | function | - | Callback on state change |
disabled | boolean | false | Disables the checkbox |
required | boolean | false | Marks as required for form validation |
Examples
Checkbox with Label
Checkbox with associated label
1 import { Checkbox } from '@cohere-ai/waypoint-ui/checkbox'; 2 import { Label } from '@cohere-ai/waypoint-ui/label'; 3 4 <div className="flex items-center gap-2"> 5 <Checkbox id="terms" /> 6 <Label htmlFor="terms">Accept terms and conditions</Label> 7 </div>
Indeterminate State
Checkbox in indeterminate state (e.g. for select-all with partial selection)
1 import { Checkbox } from '@cohere-ai/waypoint-ui/checkbox'; 2 3 <Checkbox checked="indeterminate" />
Additional Resources
Accessibility
WCAG AA
Keyboard Navigation
Tab to focus, Space to toggle.
Note: aria-checked reflects state including indeterminate.
Found an Issue?
If you've encountered a bug or have feedback about the Checkbox component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.