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.
The Checkbox
component comes with 19 different colors that you can change it using the color
prop.
You can add a label for the Checkbox
component by passing the label
prop to the Checkbox
component.
You can add a custom icon for the Checkbox
component when it's checked by passing the icon
prop to the Checkbox
component.
You can turn on/off the ripple effect for the Checkbox
component using the ripple
prop.
You can make a checkbox disable by passing the disabled
prop to the Checkbox
component.
The label
prop for the the checkbox can accept dom elements and because of that you can put links or any other dom elements you like to have with your checkbox label.
Use the example below for a more complex usage of checkbox with label that contains some description.
Use the example below for a vertical list of checkboxes.
Use the example below for a horizontal list of checkboxes.