Checkbox

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

Installation

npx lovdacn@latest add checkbox

(You can also use the shortened lvcn alias, e.g., npx lvcn@latest add checkbox)

This copies the component source into your project (typically components/ui/checkbox.tsx) and installs any required dependencies.

Registry dependencies: utils

Usage

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Text } from "@/components/ui/text"
import { View } from "react-native"

export function Example() {
  return (
    <View className="flex-row items-center gap-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">
        <Text>Accept terms and conditions</Text>
      </Label>
    </View>
  )
}

Styles

lvcn components are available across all style packs:

StyleNotes
defaultClassic rounded system
new-yorkCompact, refined
novaSharp corners (default in many setups)
luma / lyra / maia / miraRadius & font variants
rhea / sera / vegaPill, zero-radius, balanced

Style is set at project init via lvcn.json (style + styleEngine).

Platform

These components target Expo / React Native with NativeWind or Uniwind. They use Platform.select where web and native need different behavior.