Checkbox

Forms

An animated checkbox with a label, indeterminate state, and spring-driven check mark animation.

Installation

bash

npx native-mate add checkbox

Examples

#FAFAFA

Radius100%

Usage

tsx

import { Checkbox } from '~/components/ui/checkbox'
import { useState } from 'react'

const [accepted, setAccepted] = useState(false)

<Checkbox
  label="I agree to the terms and conditions"
  checked={accepted}
  onCheckedChange={setAccepted}
/>

// Indeterminate (e.g. select-all row)
<Checkbox label="Select all" indeterminate checked={false} onCheckedChange={handleSelectAll} />

Props

Prop	Type	Default	Description
checked	boolean	false	Whether the checkbox is checked.
onCheckedChange	(checked: boolean) => void	—	Called when the user toggles the checkbox.
label	string	—	Text label rendered beside the checkbox.
indeterminate	boolean	false	Shows a dash instead of a tick — useful for "select all" states.
disabled	boolean	false	Prevents interaction and reduces opacity.

Example

tsx

import { useState } from 'react'
import { Checkbox } from '~/components/ui/checkbox'
import { View } from 'react-native'

export function CheckboxExample() {
  const [items, setItems] = useState([
    { id: 1, label: 'Milk', checked: false },
    { id: 2, label: 'Eggs', checked: true },
    { id: 3, label: 'Bread', checked: false },
  ])

  const toggle = (id: number) =>
    setItems(prev => prev.map(i => i.id === id ? { ...i, checked: !i.checked } : i))

  return (
    <View style={{ gap: 12, padding: 16 }}>
      {items.map(item => (
        <Checkbox key={item.id} label={item.label} checked={item.checked} onCheckedChange={() => toggle(item.id)} />
      ))}
    </View>
  )
}

Avatar

Switch