Use of `indeterminate` Variant

Use the `indeterminate` variant in TailwindCSS to style checkboxes with an indeterminate state.

The indeterminate variant in TailwindCSS allows you to style checkboxes that are in an indeterminate state. This is particularly useful for checkboxes that represent a “partially selected” state, such as when some but not all items in a list are selected.

Customers

New users by First user primary channel group (Default Channel Group)

Date	Status	Customer	Product	Revenue
10/31/2023	Paid	Bernard Ng	Ampire Ess	$43.99
10/21/2023	Ref	Méschac Irung	Astrolus H	$19.99
05/21/2023	Can	Théo Balick	Alt Next	$59.99
05/21/2023	Paid	Glodie Lukose	Radiant	$29.99

<label for="c11" class="has-indeterminate:bg-primary-600 has-indeterminate:border-primary-700 dark:has-indeterminate:border-white/5 relative block size-4.5 rounded border border-gray-300 shadow-sm shadow-gray-950/5 transition duration-200 has-checked:border-primary-700 dark:has-checked:border-white/5 has-checked:bg-primary-600 dark:border-gray-800 dark:bg-gray-900 overflow-hidden has-focus-visible:ring-2 has-focus-visible:riing-primary-600">
    <input class="peer absolute -left-6 size-2" type="checkbox" id="c11" name="checkbox1" />
    <svg class="absolute inset-0 m-auto size-3.5 scale-75 text-gray-950 opacity-0 transition duration-300 group-hover:opacity-25 peer-checked:scale-100 peer-checked:text-white peer-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
        <path d="M20 6 9 17l-5-5"></path>
    </svg>
    <svg class="size-3 absolute inset-0 m-auto scale-0 duration-200 text-white peer-indeterminate:scale-100" stroke-width="3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
    </svg>
</label>

In this example:

The has-indeterminate:bg-primary-600 and has-indeterminate:border-primary-700 classes apply background and border colors when the checkbox is in an indeterminate state.
The peer-indeterminate:scale-100 class scales the SVG icon when the checkbox is indeterminate, making it visible.

Note: The indeterminate state is set only using JavaScript. TailwindCSS provides the styling variant to visually represent this state.

Conclusion

Using the indeterminate variant in TailwindCSS allows you to create visually distinct styles for checkboxes that are in an indeterminate state. This enhances the user experience by clearly indicating the “partially selected” state of checkboxes, making your application more intuitive and user-friendly.

Additional Resources

On this page