Components
Checkbox
Import
import { Checkbox } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
checked | boolean | — | Controlled state. Leave it undefined to let the checkbox own its state through defaultChecked. |
defaultChecked | boolean | — | Starting state when uncontrolled. Ignored once checked is passed. |
onCheckedChange | — | — | Fired with the next state on press. Without it a checked checkbox can never change. |
disabled | boolean | false | Blocks press and drops the box to 50% opacity. |
Examples
States
<View className="gap-4">
<View className="flex-row items-center gap-3">
<Checkbox defaultChecked={false} />
<Text>Unchecked</Text>
</View>
<View className="flex-row items-center gap-3">
<Checkbox defaultChecked />
<Text>Checked</Text>
</View>
<View className="flex-row items-center gap-3">
<Checkbox defaultChecked disabled />
<Text color="tertiary">Disabled</Text>
</View>
</View>Controlled
Driven from outside via checked + onCheckedChange.
{
function Controlled() {
const [checked, setChecked] = React.useState(false);
return (
<View className="flex-row items-center gap-3">
<Checkbox checked={checked} onCheckedChange={setChecked} />
<Text>{checked ? 'Option enabled' : 'Enable option'}</Text>
</View>
);
}
return <Controlled />;
}In A List
The shape it is actually used in: a list where each row owns one value and
the label is part of the hit target. hitSlop is already 16 on the box, so
the row does not need extra padding to be tappable.
{
function OptionList() {
const [selected, setSelected] = React.useState<string[]>(['b']);
const toggle = (id: string) =>
setSelected(prev => (prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]));
return (
<View className="w-80 gap-4">
{[
{ id: 'a', label: 'Option A', hint: 'Supporting description text.' },
{ id: 'b', label: 'Option B', hint: 'Supporting description text.' },
{ id: 'c', label: 'Option C', hint: 'Supporting description text.' },
].map(option => (
<View key={option.id} className="flex-row items-start gap-3">
<View className="pt-0.5">
<Checkbox
checked={selected.includes(option.id)}
onCheckedChange={() => toggle(option.id)}
/>
</View>
<View className="flex-1">
<Text>{option.label}</Text>
<Text variant="footnote" color="tertiary">
{option.hint}
</Text>
</View>
</View>
))}
</View>
);
}
return <OptionList />;
}