Checkbox
A customizable checkbox component with controlled and uncontrolled modes, disabled states, and label support.
Installation
Install the component:
npx natively-ui add checkboxUsage
CheckboxDemo.jsx
1import { Checkbox } from '@/components/ui/checkbox';
2
3export default function MyComponent() {
4 return (
5 <Checkbox
6 label="Accept terms and conditions"
7 onCheckedChange={(checked) => console.log('Checked:', checked)}
8 />
9 );
10}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | - | Unique identifier for the checkbox element. |
| checked | boolean | - | Controlled state for the checkbox. When provided, checkbox becomes controlled. |
| defaultChecked | boolean | false | Initial checked state for uncontrolled checkbox. |
| onCheckedChange | (checked: boolean) => void | - | Function called when the checkbox state changes. |
| disabled | boolean | false | Whether the checkbox is disabled. |
| required | boolean | false | Whether the checkbox is required for form validation. |
| label | string | - | Text label displayed next to the checkbox. |
| className | string | "" | Additional CSS classes for the checkbox container. |
| checkboxClassName | string | "" | Additional CSS classes for the checkbox element. |
| labelClassName | string | "" | Additional CSS classes for the label text. |
Features
- Controlled and uncontrolled modes for flexible state management
- Built-in accessibility support with proper ARIA attributes
- Disabled state with visual feedback
- Optional label with clickable interaction
- Customizable styling with className props
- Form validation support with required prop
- Built with React Native and Expo Vector Icons
- Forward ref support for external access
Examples
Basic Usage
CheckboxDemo.jsx
1<View style={{ gap: 12 }}>
2 <Checkbox label="I agree to the terms" />
3 <Checkbox label="Subscribe to newsletter" defaultChecked />
4 <Checkbox label="Remember me" />
5</View>Controlled Checkbox
CheckboxDemo.jsx
1const [isChecked, setIsChecked] = useState(false);
2
3<Checkbox
4 checked={isChecked}
5 onCheckedChange={setIsChecked}
6 label="Controlled checkbox"
7/>
8
9<Text>Status: {isChecked ? 'Checked' : 'Unchecked'}</Text>Disabled State
CheckboxDemo.jsx
1<View style={{ gap: 12 }}>
2 <Checkbox
3 label="Disabled unchecked"
4 disabled
5 />
6 <Checkbox
7 label="Disabled checked"
8 disabled
9 defaultChecked
10 />
11</View>Custom Styling
CheckboxDemo.jsx
1<View style={{ gap: 12 }}>
2 <Checkbox
3 label="Custom checkbox"
4 checkboxClassName="border-blue-500 bg-blue-50"
5 labelClassName="text-blue-700 font-semibold"
6 />
7
8 <Checkbox
9 label="Large checkbox"
10 checkboxClassName="h-6 w-6"
11 className="gap-3"
12 />
13</View>Form Integration
CheckboxDemo.jsx
1const [formData, setFormData] = useState({
2 terms: false,
3 newsletter: false,
4 notifications: true
5});
6
7const handleCheckboxChange = (field) => (checked) => {
8 setFormData(prev => ({ ...prev, [field]: checked }));
9};
10
11<View style={{ gap: 16 }}>
12 <Checkbox
13 label="I accept the terms and conditions *"
14 checked={formData.terms}
15 onCheckedChange={handleCheckboxChange('terms')}
16 required
17 />
18
19 <Checkbox
20 label="Subscribe to newsletter"
21 checked={formData.newsletter}
22 onCheckedChange={handleCheckboxChange('newsletter')}
23 />
24
25 <Checkbox
26 label="Enable notifications"
27 checked={formData.notifications}
28 onCheckedChange={handleCheckboxChange('notifications')}
29 />
30</View>Without Label
CheckboxDemo.jsx
1<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
2 <Checkbox
3 onCheckedChange={(checked) => console.log('Item 1:', checked)}
4 />
5 <Text>Custom label arrangement</Text>
6</View>