Checkbox
A pressable checkbox with controlled and uncontrolled state support.
Checkbox is the React Native implementation shipped by the native-checkbox registry item. The component adapts the registry's web-facing composition to native primitives and touch-based interaction.
The native Checkbox is a pressable boolean control. It keeps its own state when used uncontrolled, or synchronizes with checked and onCheckedChange when the parent owns the state.
The checkbox renders a native touch target, a visual box, and an optional child label. It also exposes accessibilityRole="checkbox" and an accessibility checked state.
See the shadcn/ui Checkbox documentation for the web component API, concepts, and additional examples.
Installation
CLI
npx shadcn add https://ui.tiesen.id.vn/r/native-checkbox.jsonManual
Copy and paste the following code into your project.
import { CheckIcon } from 'lucide-uniwind'import * as React from 'react'import { TouchableOpacity, View } from 'react-native'import { cn } from '@/lib/utils'function Checkbox({ className, checked: _checked = false, onCheckedChange, disabled = false, activeOpacity = 0.8, onPress, children, ...props}: React.ComponentProps<typeof TouchableOpacity> & { checked?: boolean onCheckedChange?: (checked: boolean) => void}) { const [localChecked, setLocalChecked] = React.useState(_checked) const isControlled = _checked !== undefined && onCheckedChange !== undefined const checked = isControlled ? _checked : localChecked const handlePress = React.useCallback( (event: Parameters<NonNullable<typeof onPress>>[0]) => { if (disabled) return if (!isControlled) setLocalChecked(!checked) onCheckedChange?.(!checked) onPress?.(event) }, [checked, disabled, isControlled, onCheckedChange, onPress] ) return ( <TouchableOpacity data-slot='checkbox' accessibilityRole='checkbox' accessibilityState={{ checked, disabled }} aria-checked={checked} aria-disabled={disabled} disabled={disabled} onPress={handlePress} activeOpacity={activeOpacity} className={cn( 'flex-row items-center gap-2', disabled && 'opacity-50', className )} {...props} > <View data-slot='checkbox-box' className={cn( 'flex size-5 shrink-0 items-center justify-center rounded-sm border border-border bg-transparent transition-colors', checked && 'border-primary bg-primary text-primary-foreground' )} > {checked && ( <CheckIcon className='size-4 shrink-0 text-primary-foreground' /> )} </View> {children} </TouchableOpacity> )}export { Checkbox }Features
- Controlled and uncontrolled state.
- Boolean
onCheckedChangecallback. - Disabled state.
- Configurable press opacity.
- Native checkbox accessibility semantics.
- Optional child content for labels or supporting UI.
Usage
import { Checkbox } from '@/components/native/checkbox'
export function CheckboxExample() {
const [checked, setChecked] = React.useState(false)
return (
<Checkbox
checked={checked}
onCheckedChange={setChecked}
>
Accept terms and conditions
</Checkbox>
)
}Uncontrolled
When you omit the controlled callback pair, the component maintains its own checked state.
<Checkbox>
Remember me
</Checkbox>Controlled
Use both checked and onCheckedChange when the state belongs to a parent component.
<Checkbox
checked={accepted}
onCheckedChange={setAccepted}
>
I agree
</Checkbox>The component only treats the checkbox as controlled when both the value and callback are supplied.
Disabled
<Checkbox disabled>
This option is unavailable
</Checkbox>Disabled checkboxes cannot be toggled and receive reduced opacity.
API Reference
Checkbox
| Prop | Type | Default |
|---|---|---|
checked | boolean | false |
onCheckedChange | (checked: boolean) => void | — |
disabled | boolean | false |
activeOpacity | number | 0.8 |
onPress | TouchableOpacityProps['onPress'] | — |
children | React.ReactNode | — |
className | string | — |
...props | React.ComponentProps<typeof TouchableOpacity> | — |
When both checked and onCheckedChange are provided, the parent controls the value.