Checkbox
A fundamental form control enabling users to make binary choices or select multiple options from a set. It visually represents selection states (checked, unchecked, and optionally indeterminate) and integrates seamlessly with forms.
This interactive preview demonstrates the fundamental appearance and behavior of the Checkbox component in its default state.
Installation Process
Integrating the Checkbox component into your project requires adding its code and dependencies. The component is built upon the accessible and robust Radix UI Checkbox primitive. Choose the installation method that best suits your workflow: the streamlined CLI approach or the detailed Manual Setup.
Utilizing the CLI command offers the most straightforward path to incorporating the Checkbox component. This command automates the process, fetching the component's source code and installing its underlying dependency (@radix-ui/react-checkbox) with a single instruction executed in your project's terminal.
npx shadcn@latest add checkboxBasic Component Usage
After successful installation, you can import and utilize the Checkbox component within your React application. For optimal accessibility and user experience, it's standard practice to associate each checkbox with a corresponding <label> element using the htmlFor attribute linked to the checkbox's id.
<div className="flex items-center space-x-2">
<Checkbox id="terms" />
<label
htmlFor="terms"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Accept terms and conditions
</label>
</div>For comprehensive details on managing checkbox state (controlled vs. uncontrolled components) and understanding props such as checked, onCheckedChange, defaultChecked, and disabled, consult the official Radix UI Checkbox documentation.
Illustrative Examples
Checkbox with Associated Text and Label
Enhance clarity and usability by pairing the checkbox with a descriptive label. Including additional helper text below the label can provide further context. Employing a standard HTML <label> element, correctly associated using the htmlFor attribute, is crucial for screen reader accessibility and provides a larger clickable target area.
Displaying a Disabled Checkbox State
Prevent user interaction with a checkbox by applying the standard HTML disabled attribute. This visually indicates that the checkbox is inactive and cannot be toggled, typically styled with reduced opacity and a 'not-allowed' cursor.
Checkbox Integration within Forms
Checkboxes are fundamental elements in web forms. The following examples demonstrate common patterns for integrating single or multiple checkboxes within a form structure, compatible with standard HTML form handling or popular form management libraries like React Hook Form or Formik.
Single Checkbox Form:
Multiple Checkbox Form (Group):