Checkbox components
Checkboxes let users select one or more options from a list. They're useful for settings where several choices may apply.
Installation
You can add this checkbox component using our CLI or manually:
npx untitledui add checkbox
Checkbox examples
Below are examples and variations of this checkbox component:
FAQs
You can create a checkbox group by using multiple Checkbox components with the same name attribute. This allows users to select multiple options from a group. Each checkbox should have a unique value prop for proper form handling.
Checkboxes support two sizes: "sm" (small) and "md" (medium). You can set the size using the size prop on the Checkbox component. The default size is "sm".
You can set a checkbox to an indeterminate state by using the isIndeterminate prop. This is useful for parent checkboxes in hierarchical selections where some but not all child items are selected.
Yes, you can add description or hint text to checkboxes using the hint prop. You can also add a main label using the label prop. Both props accept React nodes, allowing for rich content.
You can control checkbox state using the isSelected prop for controlled components, or defaultSelected for uncontrolled components. Use the onChange prop to handle state changes. You can also disable checkboxes with the isDisabled prop.
The checkbox component is built with accessibility in mind using React Aria. It supports keyboard navigation (Space key to toggle), proper ARIA attributes, focus management, and screen reader compatibility. The component automatically handles focus indicators.