eoria
Component

Checkbox

Rounded square toggle with a drawn check mark, no icon dependency.

Checkbox rendered on iOS, light mode
Checkbox rendered on iOS, dark mode
iPhone, zinc preset. Captured from the example app.
Terminal window
npx @eoria/cli add checkbox

Usage

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


<HStack gap={2}>
  <Checkbox checked={agree} onCheckedChange={setAgree} accessibilityLabel="Accept terms" />
  <Label onPress={() => setAgree((a) => !a)}>Accept terms</Label>
</HStack>

Props

Prop Values Default
checked boolean, required
onCheckedChange (checked: boolean) => void
size sm 20, md 24, lg 28 md
disabled boolean

Controlled only. The check mark is two borders rotated 45 degrees and scales in over 120 ms. hitSlop defaults to 8.

Source

registry/ui/checkbox.tsx