Checkbox

Checkbox component for boolean selections.

Checkbox

Checkbox is a form component for capturing boolean selections.

Import

import { Checkbox } from 'radix-native-ui';

Usage

import { Checkbox } from 'radix-native-ui';

<Checkbox
  checked={agreed}
  onCheckedChange={setAgreed}
  label="I agree to the terms"
/>

Props

Haptic Feedback

Checkboxes provide haptic feedback by default when toggled. You can disable this with the hapticFeedback prop:

<Checkbox
  checked={checked}
  onCheckedChange={setChecked}
  hapticFeedback={false}
>
  No haptic feedback
</Checkbox>

Examples

Basic Checkbox

<Checkbox
  checked={checked}
  onCheckedChange={setChecked}
  label="Accept terms"
/>

Sizes

<Checkbox size="1" label="Small" />
<Checkbox size="2" label="Medium (default)" />
<Checkbox size="3" label="Large" />

With Color

<Checkbox color="blue" checked={checked} onCheckedChange={setChecked} label="Blue checkbox" />

Disabled

<Checkbox disabled label="Disabled checkbox" />

Variants

<Checkbox variant="solid" defaultChecked label="Solid" />
<Checkbox variant="soft" defaultChecked label="Soft" />
<Checkbox variant="surface" defaultChecked label="Surface" />
<Checkbox variant="outline" defaultChecked label="Outline" />

Indeterminate

<Checkbox indeterminate label="Select all (indeterminate)" />

Form Example

<Flex direction="column" gap={3}>
  <Checkbox checked={terms} onCheckedChange={setTerms} label="I agree to the Terms of Service" />
  <Checkbox checked={privacy} onCheckedChange={setPrivacy} label="I agree to the Privacy Policy" />
  <Checkbox checked={newsletter} onCheckedChange={setNewsletter} label="Subscribe to newsletter" />
  <Button disabled={!terms || !privacy}>Continue</Button>
</Flex>

Related

• CheckboxGroup - Group of checkboxes
• CheckboxCards - Card-style checkboxes
• Switch - Toggle switch