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 — Base UI
checkbox.tsx
12345678910111213141516import { Checkbox } from "#components/ui/base-ui/checkbox.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // Root is the label wrapper; Control is Base UI's Checkbox.Root and takes // the checked props — checked styling resolves via Base UI's state-aware // className callback <Checkbox.Root variant="solid" size="md" palette={indigoPalette}> <Checkbox.Control defaultChecked /> <Checkbox.Label>Email notifications</Checkbox.Label> </Checkbox.Root> );}
// controlled: <Checkbox.Control checked={checked} onCheckedChange={setChecked} />