Checkbox

A checkbox component for selecting multiple options from a set

Default checkbox

Checked checkbox

Disabled checkbox

Installation

The Checkbox component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the Checkbox component into your React component.

import { Checkbox } from 'reacui';

Basic Usage

The Checkbox component provides a styled checkbox input.

<Checkbox id="basic-checkbox" />

With Labels

Combine checkboxes with labels for better accessibility and user experience.

I agree to the terms and conditions

Subscribe to our newsletter

<div className="flex items-center">
  <Checkbox id="terms" />
  <label htmlFor="terms" className="ml-2 block text-sm text-gray-900 dark:text-white">
    I agree to the terms and conditions
  </label>
</div>

<div className="flex items-center">
  <Checkbox id="newsletter" />
  <label htmlFor="newsletter" className="ml-2 block text-sm text-gray-900 dark:text-white">
    Subscribe to our newsletter
  </label>
</div>

Checkbox States

Checkboxes can be in different states such as checked or disabled.

Unchecked

Checked

Disabled Unchecked

Disabled Checked

<div className="flex items-center">
  <Checkbox id="unchecked" />
  <label htmlFor="unchecked" className="ml-2 block text-sm text-gray-900 dark:text-white">
    Unchecked
  </label>
</div>

<div className="flex items-center">
  <Checkbox id="checked" defaultChecked />
  <label htmlFor="checked" className="ml-2 block text-sm text-gray-900 dark:text-white">
    Checked
  </label>
</div>

<div className="flex items-center">
  <Checkbox id="disabled-unchecked" disabled />
  <label htmlFor="disabled-unchecked" className="ml-2 block text-sm text-gray-500 dark:text-gray-400">
    Disabled Unchecked
  </label>
</div>

<div className="flex items-center">
  <Checkbox id="disabled-checked" defaultChecked disabled />
  <label htmlFor="disabled-checked" className="ml-2 block text-sm text-gray-500 dark:text-gray-400">
    Disabled Checked
  </label>
</div>

In Forms

Use checkboxes in forms to collect multiple selections.

Notification Preferences

<div className="p-6 bg-white dark:bg-secondary-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
  <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Notification Preferences</h3>
  <form className="space-y-4">
    <div className="flex items-start">
      <div className="flex items-center h-5">
        <Checkbox id="email-updates" defaultChecked />
      </div>
      <div className="ml-3 text-sm">
        <label htmlFor="email-updates" className="font-medium text-gray-700 dark:text-gray-200">
          Email updates
        </label>
        <p className="text-gray-500 dark:text-gray-400">Get notified when new features are released</p>
      </div>
    </div>
    <div className="flex items-start">
      <div className="flex items-center h-5">
        <Checkbox id="marketing" />
      </div>
      <div className="ml-3 text-sm">
        <label htmlFor="marketing" className="font-medium text-gray-700 dark:text-gray-200">
          Marketing emails
        </label>
        <p className="text-gray-500 dark:text-gray-400">Receive product tips and promotional offers</p>
      </div>
    </div>
    <div className="pt-4 border-t border-gray-200 dark:border-gray-700">
      <Button variant="primary">Save preferences</Button>
    </div>
  </form>
</div>

API Reference

The following props are available for the Checkbox component.

Prop	Type	Default	Description
id	string	undefined	ID for the checkbox input, useful for linking with labels
checked	boolean	undefined	Controlled checked state of the checkbox
defaultChecked	boolean	false	Initial checked state for uncontrolled checkbox
disabled	boolean	false	Whether the checkbox is disabled
onChange	function	undefined	Function called when checkbox state changes
className	string	''	Additional CSS classes to apply to the checkbox