Checkbox

The Checkbox component provides a styled toggle control built with React Native's Pressable. It supports checked and unchecked states with a check icon indicator, focus ring styling, and disabled state handling.

Preview

Checked

Unchecked

Installation

npx novaui-cli add checkbox

Import

import { Checkbox } from 'novaui-components'

Basic Usage

A simple checkbox with checked and unchecked states:

Accept terms and conditions

import { useState } from 'react'
import { Checkbox } from 'novaui-components'
import { Text, View } from 'react-native'

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

  return (
    <View className="flex-row items-center gap-2">
      <Checkbox checked={checked} onCheckedChange={setChecked} />
      <Text className="text-sm text-foreground">Accept terms and conditions</Text>
    </View>
  )
}

States

Checked

Notifications enabled

<View className="flex-row items-center gap-2">
  <Checkbox checked={true} onCheckedChange={setChecked} />
  <Text className="text-sm text-foreground">Notifications enabled</Text>
</View>

Unchecked

Notifications enabled

<View className="flex-row items-center gap-2">
  <Checkbox checked={false} onCheckedChange={setChecked} />
  <Text className="text-sm text-foreground">Notifications enabled</Text>
</View>

Disabled

Checked & disabled

Unchecked & disabled

<Checkbox checked={true} disabled />
<Checkbox checked={false} disabled />

Common Patterns

Checkbox Group

Email notifications

Push notifications

SMS notifications

import { useState } from 'react'
import { Checkbox } from 'novaui-components'
import { Text, View } from 'react-native'

export function CheckboxGroup() {
  const [email, setEmail] = useState(true)
  const [push, setPush] = useState(false)
  const [sms, setSms] = useState(true)

  return (
    <View className="gap-3">
      <View className="flex-row items-center gap-2">
        <Checkbox checked={email} onCheckedChange={setEmail} />
        <Text className="text-sm text-foreground">Email notifications</Text>
      </View>
      <View className="flex-row items-center gap-2">
        <Checkbox checked={push} onCheckedChange={setPush} />
        <Text className="text-sm text-foreground">Push notifications</Text>
      </View>
      <View className="flex-row items-center gap-2">
        <Checkbox checked={sms} onCheckedChange={setSms} />
        <Text className="text-sm text-foreground">SMS notifications</Text>
      </View>
    </View>
  )
}

Props API

CheckboxProps

Extends React.ComponentPropsWithoutRef<typeof Pressable> and includes:

Prop	Type	Default	Description
`checked`	`boolean`	-	Whether the checkbox is checked
`onCheckedChange`	`(checked: boolean) => void`	-	Callback fired when the checked state changes
`disabled`	`boolean`	`false`	When `true`, the checkbox is non-interactive with reduced opacity
`className`	`string`	-	Additional CSS classes for custom styling

Best Practices

Always provide a label: Pair each checkbox with descriptive text for accessibility
Use for multiple selections: Checkboxes are ideal when users can select multiple items from a list
Use controlled state: Manage checked and onCheckedChange for predictable form behavior
Group related checkboxes: Use FieldGroup to organize related checkbox options together

Use with Field and FieldLabel for labeled form checkboxes
Use Switch for on/off toggles where the action takes immediate effect
Use RadioGroup when only one option can be selected from a group

Continue reading

Getting Started Components Overview Popular: Dialog SEO Playbook

Checkbox

Continue reading

On this page