All components
Checkbox
Binary selection controls with outline, solid, and subtle boxes and a paired label.
Variants
outline
solid
subtle
Sizes
xs
sm
md
lg
Install
zsh — checkbox
1bunx stylexblocks add checkboxUsage — Ark UI
checkbox.tsx
12345678910111213141516import { Checkbox } from "#components/ui/ark-ui/checkbox.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // variant/size resolve once on Root; every part inherits them via context <Checkbox.Root defaultChecked variant="solid" size="md" palette={indigoPalette}> <Checkbox.Control /> <Checkbox.Label>Email notifications</Checkbox.Label> <Checkbox.HiddenInput /> </Checkbox.Root> );}
// controlled: <Checkbox.Root checked={checked} onCheckedChange={(d) => setChecked(d.checked === true)}>// custom indicator: <Checkbox.Control><Checkbox.Indicator><MinusIcon /></Checkbox.Indicator></Checkbox.Control>