Tailwind CSS Checkbox

A checkbox is an input control that allows a user to select one or more options from a number of choices.

Attention needed

By default Preline UI uses Tailwind CSS Forms plugin. Don't forget to install it!

Basic usage

Default

By default, a checkbox input includes a selected and unselected state.

Default checkbox

Checked checkbox

Indeterminate

Checkboxes can utilize the :indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).

Indeterminate checkbox

Disabled indeterminate checkbox

The @tailwindcss/forms plugin does not natively support the indeterminate state for checkboxes. However, you can implement this functionality with custom CSS.

You can add custom styles for the indeterminate state in your tailwind.config.js file as shown below:

tailwind.config.js:

                  
                    module.exports = {
                      theme: {
                        extend: {
                          customForms: theme => ({
                            default: {
                              checkbox: {
                                '&:indeterminate': {
                                  background: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 16 16\' fill=\'white\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect width=\'8\' height=\'2\' x=\'4\' y=\'7\' rx=\'1\'/%3E%3C/svg%3E");',
                                  borderColor: 'transparent',
                                  backgroundColor: 'currentColor',
                                  backgroundSize: '100% 100%',
                                  backgroundPosition: 'center',
                                  backgroundRepeat: 'no-repeat',
                                }
                              }
                            }
                          })
                        },
                      },
                      plugins: [
                        require('@tailwindcss/forms'),
                      ],
                    }

JavaScript code example: