Checkbox

Installation#

pnpm dlx shadcn@latest add @zui/checkbox

The CLI writes components/ui/checkbox.tsx, installs Icon and Utils, and adds @rn-primitives/checkbox and lucide-react-native.

Usage#

import { useState } from 'react';

import { Checkbox } from '@/components/ui/checkbox';

const [accepted, setAccepted] = useState(false);

<Checkbox checked={accepted} onCheckedChange={setAccepted} aria-label="Accept the terms" />;

API reference#

Checkbox#

Takes every prop of the @rn-primitives/checkbox root, plus:

Checkbox is controlled. Pressing it calls onCheckedChange with the new value, and the mark shows once checked follows. A disabled checkbox is dimmed and ignores presses. aria-invalid draws the destructive border while the box is unchecked. React Native does not announce it, so carry the error in accessibilityHint or in a Text the user can reach.

Name it with aria-label, which iOS and Android both read. Android also reads a Label's nativeID through aria-labelledby; iOS ignores that prop.