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

Usage

Import the component and pass the required props.

import { Checkbox } from "@/registry/core/checkbox";

export default () => <Checkbox label="Accept terms and conditions" />;

Examples

With Label

Use the label prop to display text next to the checkbox.

Controlled

Control the checked state using React state.

import { useState } from "react";

export default () => {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      label="Subscribe to newsletter"
      checked={checked}
      onChange={e => setChecked(e.target.checked)}
    />
  );
};

API Reference

Checkbox

Extends input element props.

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-disabled on the label
• Hover states are disabled when checkbox is disabled

Notes

• The checkbox input uses sr-only to hide it visually while keeping it accessible
• Check icon appears only when checkbox is checked
• Focus ring appears on keyboard focus with ring-4 style
• Hover effects apply to both the checkbox and label for better UX
• All standard input HTML attributes are supported (except size which is used for visual sizing)