Checkbox

A control that allows the user to toggle between checked and not checked states.

Installation


pnpm dlx bna-ui add checkbox

Usage

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

const [checked, setChecked] = useState(false);
 
<Checkbox
  checked={checked}
  onCheckedChange={setChecked}
  label='Accept terms and conditions'
/>;

Examples

Default

Different States

Without Label

With Error State

Custom Styling

Checkbox Group

API Reference

Checkbox

A checkbox component that allows users to select or deselect an option.

Prop	Type	Default	Description
`checked`	`boolean`	-	Whether the checkbox is checked.
`onCheckedChange`	`(checked: boolean) => void`	-	Callback function called when the checked state changes.
`label`	`string`	-	Optional label text to display next to the checkbox.
`error`	`string`	-	Error message to display (affects styling).
`disabled`	`boolean`	`false`	Whether the checkbox is disabled.
`labelStyle`	`TextStyle`	-	Additional styles to apply to the label text.

Accessibility

The Checkbox component is built with accessibility in mind:

Uses TouchableOpacity for proper touch handling
Supports disabled state with reduced opacity
Label text is properly associated with the checkbox
Provides visual feedback for checked/unchecked states
Uses semantic color theming for different states
Supports custom styling while maintaining accessibility

Theming

The component uses the following theme colors:

primary: Color for checked state border and background
primaryForeground: Color for the check icon
border: Color for unchecked state border
red: Color for error state styling

These colors are automatically resolved using the useThemeColor hook to support light and dark themes.

Carousel Collapsible

On This Page

Installation Usage Examples Default Different States Without Label With Error State Custom Styling Checkbox Group API Reference Checkbox Accessibility Theming