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 checkbox

Usage

Import the component and either provide an accessible name directly or pair it with the standalone Label component.

import { Checkbox } from "@/components/tailgrids/core/checkbox";
import { Label } from "@/components/tailgrids/core/label";
import { useId } from "react";

export default function CheckboxExample() {
  const id = useId();

  return (
    <div className="flex items-center gap-3">
      <Checkbox id={id} defaultChecked />
      <Label htmlFor={id}>Accept terms and conditions</Label>
    </div>
  );
}

Examples

Sizes

The Checkbox component supports two sizes: sm (default) and md.

With Label

Use the standalone Label component when you want visible text next to the checkbox.

Controlled

Control the checked state using React state.

API Reference

Checkbox

Extends input element props.

Accessibility

• Uses a native <input type="checkbox"> with standard keyboard support
• Pair with the standalone Label component for visible text and htmlFor/id association
• Requires an accessible name via aria-label or aria-labelledby when no visible label is used
• Fully keyboard accessible with standard checkbox behavior
• Visible focus ring provides clear keyboard feedback
• Disabled state is communicated by the native input disabled attribute
• Hover states are disabled when checkbox is disabled