Checkbox
React Checkbox components are used to let users select one or more options from a list. They are commonly used in forms, settings panels, and preference selections.
This Checkbox component is built with React and styled using Tailwind CSS, providing consistent visuals while keeping native checkbox behavior.
Installation
npx @tailgrids/cli add checkboxUsage
Import the component and pass the required props.
import { Checkbox } from "@/registry/core/checkbox";
export default CheckboxPreview = () => (
<Checkbox label="Accept terms and conditions" />
);Examples
Sizes
The Checkbox component supports two sizes: sm (default) and md.
With Label
Use the label prop to display text next to the checkbox.
Note: Hover effects apply to both the checkbox and label for better UX.
Controlled
Control the checked state using React state.
API Reference
Checkbox
Extends input element props.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm', 'md' | 'sm' | Checkbox size |
label | string | - | Label text next to checkbox |
id | string | - | Custom input ID (auto-generated if not provided) |
disabled | boolean | false | Disable checkbox interaction |
checked | boolean | - | Controlled checked state |
defaultChecked | boolean | - | Uncontrolled default checked state |
onChange | (e: ChangeEvent) => void | - | Change event handler |
Accessibility
- Uses native
<input type="checkbox">with screen reader support - Automatically generates unique IDs if not provided
- Label is properly associated with input via
htmlFor - Fully keyboard accessible with standard checkbox behavior
- Visible focus ring provides clear keyboard feedback
- Disabled state is communicated via
aria-disabledon the label - Hover states are disabled when checkbox is disabled