Selects a single value, typically for submission in a form.
<Flex>
<Text size="2">
<label>
<Checkbox mr="1" defaultChecked /> Agree to Terms and Conditions
</label>
</Text>
</Flex>
This component inherits props from the Radix Checkbox primitive and supports common margin props.
Use the size prop to control the size.
<Flex align="center" gap="2">
<Checkbox size="2" defaultChecked />
<Checkbox size="1" defaultChecked />
</Flex>
Use the variant prop to control the visual style.
<Grid columns="2" gap="2" display="inline-grid">
<Checkbox variant="surface" defaultChecked />
<Checkbox variant="surface" />
<Checkbox variant="classic" defaultChecked />
<Checkbox variant="classic" />
<Checkbox variant="soft" defaultChecked />
<Checkbox variant="soft" />
</Grid>
Use the color prop to assign a specific color, ignoring the global theme.
<Flex gap="2">
<Checkbox color="indigo" defaultChecked />
<Checkbox color="cyan" defaultChecked />
<Checkbox color="orange" defaultChecked />
<Checkbox color="crimson" defaultChecked />
</Flex>
Use the highContrast prop to add additional contrast.
<Grid columns="2" gap="2" display="inline-grid">
<Checkbox variant="surface" defaultChecked />
<Checkbox variant="surface" defaultChecked highContrast />
<Checkbox variant="classic" defaultChecked />
<Checkbox variant="classic" defaultChecked highContrast />
<Checkbox variant="soft" defaultChecked />
<Checkbox variant="soft" defaultChecked highContrast />
</Grid>
By default, the checkbox is vertically aligned when placed inline with Text size 2. This is the most common font size used with controls.
<Flex>
<Text size="2">
<label>
<Checkbox mr="1" /> Agree to Terms and Conditions
</label>
</Text>
</Flex>
It is also well-aligned with Text size 2 in a default flex layout.
<Box style={{ maxWidth: 400 }}>
<Text size="2">
<Flex gap="2">
<Checkbox id="checkbox-1" />
<label htmlFor="checkbox-1">
I understand that these documents are confidential and cannot be shared
with a third party.
</label>
</Flex>
</Text>
</Box>
Use center alignment with other Text sizes.
<Flex direction="column" gap="3" style={{ maxWidth: 300 }}>
<Text asChild size="1">
<Flex align="center" gap="2">
<Checkbox id="checkbox-2" />
<label htmlFor="checkbox-2">Agree to Terms and Conditions</label>
</Flex>
</Text>
<Text asChild size="2">
<Flex align="center" gap="2">
<Checkbox id="checkbox-3" />
<label htmlFor="checkbox-3">Agree to Terms and Conditions</label>
</Flex>
</Text>
<Text asChild size="3">
<Flex align="center" gap="2">
<Checkbox id="checkbox-4" />
<label htmlFor="checkbox-4">Agree to Terms and Conditions</label>
</Flex>
</Text>
<Text asChild size="4">
<Flex align="center" gap="2">
<Checkbox id="checkbox-5" />
<label htmlFor="checkbox-5">Agree to Terms and Conditions</label>
</Flex>
</Text>
</Flex>
You can also nest Flex elements to reliably align the checkbox with the first line of text. In this case, the height of the second Flex container matches the text line height.
<Box style={{ maxWidth: 500 }}>
<Text size="3">
<Flex align="start" gap="2">
<Flex align="center" height="5">
<Checkbox id="checkbox-6" />
</Flex>
<label htmlFor="checkbox-6">
I understand that these documents are confidential and cannot be shared
with a third party.
</label>
</Flex>
</Text>
</Box>
Use the native disabled attribute to create a disabled checkbox.
<Text size="2">
<Flex direction="column" gap="2">
<Flex align="center" gap="2">
<Checkbox id="checkbox-7" />
<label htmlFor="checkbox-7">Not checked</label>
</Flex>
<Flex align="center" gap="2">
<Checkbox id="checkbox-8" defaultChecked />
<label htmlFor="checkbox-8">Checked</label>
</Flex>
<Flex align="center" gap="2">
<Checkbox id="checkbox-9" disabled />
<label htmlFor="checkbox-9">Disabled</label>
</Flex>
<Flex align="center" gap="2">
<Checkbox id="checkbox-10" defaultChecked disabled />
<label htmlFor="checkbox-10">Disabled checked</label>
</Flex>
</Flex>
</Text>