Tailwind CSS Checkbox - React

Use our Tailwind CSS 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.

Checkbox Colors

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

Checkbox with Label

You can add a label for the Checkbox component by passing the label prop to the Checkbox component.

Checkbox Custom Icon

You can add a custom icon for the Checkbox component when it's checked by passing the icon prop to the Checkbox component.

Checkbox Ripple Effect

You can turn on/off the ripple effect for the Checkbox component using the ripple prop.

Edit this page on Github