Checkbox

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

import { Checkbox } from '@/components/ui/checkbox';
import React, { useState } from 'react';

export function CheckboxDemo() {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      checked={checked}
      onCheckedChange={setChecked}
      label='Accept terms and conditions'
    />
  );
}

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

import { Checkbox } from '@/components/ui/checkbox';
import React, { useState } from 'react';

export function CheckboxDemo() {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      checked={checked}
      onCheckedChange={setChecked}
      label='Accept terms and conditions'
    />
  );
}

Different States

import { Checkbox } from '@/components/ui/checkbox';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React, { useState } from 'react';

export function CheckboxStates() {
  const [checked1, setChecked1] = useState(false);
  const [checked2, setChecked2] = useState(true);
  const [checked3, setChecked3] = useState(false);

  return (
    <View style={{ gap: 16 }}>
      <Text variant='subtitle' style={{ marginBottom: 8 }}>
        Different States
      </Text>

      <Checkbox
        checked={checked1}
        onCheckedChange={setChecked1}
        label='Unchecked'
      />

      <Checkbox
        checked={checked2}
        onCheckedChange={setChecked2}
        label='Checked'
      />

      <Checkbox
        checked={checked3}
        onCheckedChange={setChecked3}
        label='Disabled'
        disabled
      />
    </View>
  );
}

Without Label

import { Checkbox } from '@/components/ui/checkbox';
import React, { useState } from 'react';

export function CheckboxWithoutLabel() {
  const [checked, setChecked] = useState(false);

  return <Checkbox checked={checked} onCheckedChange={setChecked} />;
}

With Error State

import { Checkbox } from '@/components/ui/checkbox';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React, { useState } from 'react';

export function CheckboxWithError() {
  const [checked, setChecked] = useState(false);

  return (
    <View style={{ gap: 8 }}>
      <Checkbox
        checked={checked}
        onCheckedChange={setChecked}
        label='I agree to the terms'
        error='You must accept the terms to continue'
      />
      {!checked && (
        <Text variant='caption' style={{ color: 'red', marginLeft: 28 }}>
          You must accept the terms to continue
        </Text>
      )}
    </View>
  );
}

Custom Styling

import { Checkbox } from '@/components/ui/checkbox';
import { View } from '@/components/ui/view';
import React, { useState } from 'react';

export function CheckboxCustomStyling() {
  const [checked1, setChecked1] = useState(false);
  const [checked2, setChecked2] = useState(true);

  return (
    <View style={{ gap: 16 }}>
      <Checkbox
        checked={checked1}
        onCheckedChange={setChecked1}
        label='Custom styled checkbox'
        labelStyle={{
          fontSize: 18,
          fontWeight: '600',
          color: '#6366f1',
        }}
      />

      <Checkbox
        checked={checked2}
        onCheckedChange={setChecked2}
        label='Another custom style'
        labelStyle={{
          fontSize: 16,
          fontStyle: 'italic',
          color: '#10b981',
        }}
      />
    </View>
  );
}

Checkbox Group

import { Checkbox } from '@/components/ui/checkbox';
import { Text } from '@/components/ui/text';
import { View } from '@/components/ui/view';
import React, { useState } from 'react';

export function CheckboxGroup() {
  const [selectedItems, setSelectedItems] = useState<string[]>([]);

  const items = [
    { id: 'notifications', label: 'Email notifications' },
    { id: 'marketing', label: 'Marketing emails' },
    { id: 'updates', label: 'Product updates' },
    { id: 'newsletter', label: 'Weekly newsletter' },
  ];

  const handleItemChange = (itemId: string, checked: boolean) => {
    if (checked) {
      setSelectedItems((prev) => [...prev, itemId]);
    } else {
      setSelectedItems((prev) => prev.filter((id) => id !== itemId));
    }
  };

  return (
    <View style={{ gap: 16 }}>
      <Text variant='subtitle'>Subscription Preferences</Text>

      <View style={{ gap: 12 }}>
        {items.map((item) => (
          <Checkbox
            key={item.id}
            checked={selectedItems.includes(item.id)}
            onCheckedChange={(checked) => handleItemChange(item.id, checked)}
            label={item.label}
          />
        ))}
      </View>

      <Text variant='caption' style={{ marginTop: 8 }}>
        Selected: {selectedItems.length} item(s)
      </Text>
    </View>
  );
}

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