Checkbox
Use in forms to toggle between two states.
Features
Supports indeterminate state.
Accessible, easy to compose and customize.
Sizable & works controlled or uncontrolled.
Ability to opt-out to native checkbox on web.
Usage
import { Check } from '@tamagui/lucide-icons'import { Checkbox } from 'tamagui'export default () => (<Checkbox size="$4"><Checkbox.Indicator><Check /></Checkbox.Indicator></Checkbox>)
API Reference
Checkbox
Checkbox
extend ThemeableStack inheriting all the props, plus:
Props
labeledBy
string
Set aria-labeled-by.
name
string
Equivalent to input name.
value
string
Give it a value (for use in HTML forms).
checked
boolean
Control the input.
defaultChecked
boolean
Uncontrolled default value.
required
boolean
Sets aria-required.
native
boolean
Renders native checkbox input on web.
onCheckedChange
(checked: boolean) => void
sizeAdjust
number
Adjust the checkbox size scaling by this number.
scaleIcon
number
Scale the indicator icon more than usual by this number.
scaleSize
number
Default:
0.5
The Tamagui size tokens should map to the height of a button at any given step. This means you want somewhat smaller checkboxes typically.
unstyled
boolean
Removes all default Tamagui styles.
Checkbox.Indicator
Checkbox.Indicator
extend ThemeableStack inheriting all the props, plus:
Props
forceMount
boolean
Used to force mounting when more control is needed.
disablePassStyles
boolean
Used to disable passing styles down to children.