Checkbox

Allow users to select one or multiple options from a set with accessible checkbox inputs.

Installation

Usage

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

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

Examples

With Label

Controlled

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
• Keyboard accessible with standard checkbox behavior
• Focus ring provides clear visual 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)