Tailwind CSS React Checkbox - Horizon UI

Use our Tailwind CSS React Checkbox to allow the user to select one or more items from a set.

You can use a Checkbox for:

• Selecting one or more options from a list
• Presenting a list containing sub-selections
• Turning an item on/off in a desktop environment (If you have a single option, avoid using a Checkbox and use an on/off switch instead)

See below our simple Checkbox example that you can use in your React and Tailwind CSS projects. The example also comes in different colors, so you can adapt it easily to your needs. Our Checkbox is basically a customized input which supports all the props available for a HTML input and more.

import { Checkbox } from "components/Checkbox";
 
export default function Example() {
  return <Checkbox defaultChecked />;
}

Checkbox Colors

The Checkbox component comes with multiple different colors that you can change it using the color prop.

import { Checkbox } from "components/Checkbox";
 
export default function Colors() {
  return (
    <div className="flex w-max gap-4">
      <CheckboxHorizon defaultChecked />
      <Checkbox color="blue" defaultChecked />
      <Checkbox color="red" defaultChecked />
      <Checkbox color="green" defaultChecked />
      <Checkbox color="amber" defaultChecked />
      <Checkbox color="teal" defaultChecked />
      <Checkbox color="indigo" defaultChecked />
      <Checkbox color="purple" defaultChecked />
      <Checkbox color="pink" defaultChecked />
    </div>
  );
}