Checkbox

Checkbox with an icon indicator.

Installation

Terminal

npx magic-native-ui@latest add checkbox

Usage

The example running in the preview above. Imports use the default aliases from components.json.

checkbox-demo.tsx

import * as React from 'react'
import { View } from 'react-native'

import { Checkbox } from '@/components/ui/checkbox'
import { Text } from '@/components/ui/text'

export function CheckboxDemo() {
  const [checked, setChecked] = React.useState(true)

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

Component source

What the CLI copies into your project. Once it is there, the code is yours to edit.

registry/ui/checkbox.tsx

import { Check } from 'lucide-react-native'
import { Pressable, View, type GestureResponderEvent } from 'react-native'

import { iconWithClassName } from '@/registry/lib/icons'
import { cn } from '@/registry/lib/utils'

const CheckIcon = iconWithClassName(Check)

type CheckboxProps = Omit<React.ComponentProps<typeof Pressable>, 'children'> & {
  checked: boolean
  onCheckedChange: (checked: boolean) => void
}

function Checkbox({
  className,
  checked,
  onCheckedChange,
  disabled,
  onPress,
  ...props
}: CheckboxProps) {
  function handlePress(event: GestureResponderEvent) {
    onCheckedChange(!checked)
    onPress?.(event)
  }

  return (
    <Pressable
      role="checkbox"
      aria-checked={checked}
      aria-disabled={disabled ?? undefined}
      disabled={disabled}
      onPress={handlePress}
      data-state={checked ? 'checked' : 'unchecked'}
      className={cn(
        'h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-primary',
        'data-[state=checked]:bg-primary',
        'disabled:opacity-50',
        className
      )}
      {...props}
    >
      {checked ? (
        <View role="presentation" className="h-full w-full items-center justify-center">
          <CheckIcon size={12} className="text-primary-foreground" />
        </View>
      ) : null}
    </Pressable>
  )
}

export { Checkbox }
export type { CheckboxProps }