Checkbox & Radio
Selection controls for single and multiple choices. Checkbox supports checked, indeterminate, and disabled states with 3 sizes and 5 color themes. RadioGroup provides single-select with horizontal or vertical layouts. Both built on Framer Motion for smooth spring animations.
Live Preview \u2014 Checkbox
Interact with the Checkbox component in real time. Adjust size, color, label position, and state to see changes instantly.
1<Checkbox2checked={true}3size="md"4color="primary"5labelPosition="right"6label="Subscribe to newsletter"7onChange={(checked) => setChecked(checked)}8/>Live Preview \u2014 Radio
Interact with the RadioGroup component in real time. Adjust size, color, orientation, and disabled state.
1<RadioGroup2value="option1"3size="md"4color="primary"5orientation="vertical"6onChange={(value) => setValue(value)}7options={[8 { value: 'option1', label: 'Option One' },9 { value: 'option2', label: 'Option Two' },10 { value: 'option3', label: 'Option Three' },11]}12/>Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the Checkbox and RadioGroup components into your file.
import { Checkbox, RadioGroup } from '@/components/aidash/checkbox';Basic Checkbox
The simplest way to use a Checkbox with a label and controlled state.
1const [checked, setChecked] = useState(false);2 3<Checkbox4checked={checked}5onChange={setChecked}6label="Accept terms and conditions"7/>Checkbox Sizes
Three sizes to fit different layout contexts.
1<Checkbox checked size="sm" label="Small" />2<Checkbox checked size="md" label="Medium" />3<Checkbox checked size="lg" label="Large" />Checkbox Colors
Five color themes for different semantic contexts.
1<Checkbox checked color="primary" label="Primary" />2<Checkbox checked color="accent" label="Accent" />3<Checkbox checked color="success" label="Success" />4<Checkbox checked color="warning" label="Warning" />5<Checkbox checked color="error" label="Error" />Indeterminate State
Use indeterminate for parent checkboxes that represent a partially selected group of children.
1const [fruits, setFruits] = useState({2apple: true, banana: false, cherry: true3});4const allChecked = Object.values(fruits).every(Boolean);5const noneChecked = Object.values(fruits).every(v => !v);6 7<Checkbox8checked={allChecked}9indeterminate={!allChecked && !noneChecked}10onChange={(checked) =>11 setFruits({ apple: checked, banana: checked, cherry: checked })12}13label="Select all fruits"14/>15<div className="ml-6 space-y-2">16<Checkbox17 checked={fruits.apple}18 onChange={(c) => setFruits(p => ({ ...p, apple: c }))}19 label="Apple"20/>21<Checkbox22 checked={fruits.banana}23 onChange={(c) => setFruits(p => ({ ...p, banana: c }))}24 label="Banana"25/>26<Checkbox27 checked={fruits.cherry}28 onChange={(c) => setFruits(p => ({ ...p, cherry: c }))}29 label="Cherry"30/>31</div>Label Position
Place the label on the left or right side of the checkbox.
1<Checkbox checked labelPosition="right" label="Label on right" />2<Checkbox checked labelPosition="left" label="Label on left" />Basic Radio Group
A simple radio group for single-select choices.
1const [value, setValue] = useState('react');2 3<RadioGroup4value={value}5onChange={setValue}6label="Favorite framework"7options={[8 { value: 'react', label: 'React' },9 { value: 'vue', label: 'Vue' },10 { value: 'svelte', label: 'Svelte' },11 { value: 'angular', label: 'Angular' },12]}13/>Radio Orientation
Choose between vertical and horizontal layouts for radio groups.
Vertical (default)
Horizontal
1{/* Vertical (default) */}2<RadioGroup3orientation="vertical"4options={[5 { value: 'small', label: 'Small' },6 { value: 'medium', label: 'Medium' },7 { value: 'large', label: 'Large' },8]}9/>10 11{/* Horizontal */}12<RadioGroup13orientation="horizontal"14options={[...]}15/>Radio Sizes & Colors
Combine size and color variants to match your design system.
Sizes
Colors
1{/* Sizes */}2<RadioGroup size="sm" options={[...]} />3<RadioGroup size="md" options={[...]} />4<RadioGroup size="lg" options={[...]} />5 6{/* Colors */}7<RadioGroup color="primary" options={[...]} />8<RadioGroup color="accent" options={[...]} />9<RadioGroup color="success" options={[...]} />10<RadioGroup color="warning" options={[...]} />11<RadioGroup color="error" options={[...]} />Disabled States
Disabled checkboxes and radios are dimmed and non-interactive.
Disabled Checkboxes
Disabled Radio Group
Individual Disabled Option
1{/* Disabled checkbox */}2<Checkbox checked disabled label="Checked disabled" />3 4{/* Disabled entire radio group */}5<RadioGroup disabled value="a" options={[...]} />6 7{/* Individual disabled option */}8<RadioGroup9options={[10 { value: 'free', label: 'Free' },11 { value: 'pro', label: 'Pro' },12 { value: 'enterprise', label: 'Enterprise', disabled: true },13]}14/>Accessibility
Built-in ARIA attributes, roles, and keyboard navigation for assistive technology.
role="checkbox" & role="radio"
Each Checkbox uses role="checkbox" and each radio button uses role="radio" with a wrapping role="radiogroup".
aria-checked
Checkbox sets aria-checked="true", "false", or "mixed" for indeterminate. Radio buttons set aria-checked based on selection state.
Keyboard Navigation
Tab to focus, Space or Enter to toggle checkboxes and select radio buttons. Disabled items are skipped from the tab order.
Label Association
Labels are wrapped in <label> elements for clickable target areas. RadioGroup supports aria-label via the group label prop.
1{/* Checkbox with aria-checked="mixed" for indeterminate */}2<Checkbox3indeterminate4label="Select all"5/>6{/* Renders: <button role="checkbox" aria-checked="mixed"> */}7 8{/* RadioGroup with aria-label */}9<RadioGroup10label="Payment method"11options={[12 { value: 'card', label: 'Credit Card' },13 { value: 'paypal', label: 'PayPal' },14]}15/>16{/* Renders: <div role="radiogroup" aria-label="Payment method"> */}API Reference
Complete list of props for Checkbox and RadioGroup components.
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | false | Whether the checkbox is checked |
| indeterminate | boolean | false | Show indeterminate (mixed) state instead of checked |
| onChange | (checked: boolean) => void | — | Callback fired when the checked state changes |
| label | ReactNode | — | Text or element displayed next to the checkbox |
| labelPosition | 'left' | 'right' | 'right' | Position of the label relative to the checkbox |
| disabled | boolean | false | Disable interaction and dim the checkbox |
| size | 'sm' | 'md' | 'lg' | 'md' | Size of the checkbox |
| color | 'primary' | 'accent' | 'success' | 'warning' | 'error' | 'primary' | Color theme of the checkbox when checked |
| className | string | '' | Additional CSS classes |
| name | string | — | HTML name attribute for form integration |
| Prop | Type | Default | Description |
|---|---|---|---|
| options | RadioOption[] | — | Array of radio options to render |
| value | string | — | Currently selected value |
| onChange | (value: string) => void | — | Callback fired when the selected option changes |
| name | string | — | HTML name attribute for form integration |
| orientation | 'horizontal' | 'vertical' | 'vertical' | Layout direction of the radio options |
| size | 'sm' | 'md' | 'lg' | 'md' | Size of the radio buttons |
| color | 'primary' | 'accent' | 'success' | 'warning' | 'error' | 'primary' | Color theme when an option is selected |
| labelPosition | 'left' | 'right' | 'right' | Position of labels relative to radio buttons |
| disabled | boolean | false | Disable all options in the group |
| label | string | — | Group label displayed above the options |
| className | string | '' | Additional CSS classes |
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Unique value for this option |
| label | ReactNode | — | Text or element displayed next to the radio button |
| disabled | boolean | false | Disable this individual option |
checked + onChange for Checkbox and value + onChange for RadioGroup to manage state.Related
Other components that work well alongside Checkbox and Radio.