forms

Tailwind CSS Radio

The radio component allows users to select one option from multiple choices. It comes in various styles, variants, and colors.

Class Name
Type
Description
radioComponentTargets radio input.
radio-insetComponentTargets radio input.
form-controlComponentContainer element.
labelComponentFor helper text.
custom-optionComponentFor custom radio container.
custom-label-optionComponentFor custom radio container with background.
radio-primaryModifierAdds ‘primary’ color to radio.
radio-secondaryModifierAdds ‘secondary’ color to radio.
radio-accentModifierAdds ‘accent’ color to radio.
radio-infoModifierAdds ‘info’ color to radio.
radio-successModifierAdds ‘success’ color to radio.
radio-warningModifierAdds ‘warning’ color to radio.
radio-errorModifierAdds ’error’ color to radio.
is-validModifierAdds success style to the input.
is-invalidModifierAdds error style to the input.
radio-xsResponsiveRadio with extra small size.
radio-smResponsiveRadio with small size.
radio-lgResponsiveRadio with large size.

Basic radio example.

Utilize the form-control class in conjunction with a label tag and implement styling using Tailwind CSS classes.

Apply the radio class to style radio buttons.

To apply a semantically colored inset border, replace the radio class with the radio-inset class.

Example of semantic color in default and custom radio.

Add color to the radio button by utilizing the radio-{semantic-color} class in conjunction with the radio class.

Use the radio-inset-{semantic-color} class in combination with the radio-inset class.

Example of custom color in default and custom radio.

Using the checked: modifier, you can alter the radio button’s color when radio is checked. For the default state, simply modify the bg and border colors.

For the custom state, simply modify the border colors.

Adjust the size of a radio button to either small or large by applying the radio-xs, radio-sm and radio-lg classes to both the radio and radio-inset components.

Custom radio sizes example.

Success state can be show using is-valid class.

Error state can be show using is-invalid class.

Disable the radio component to prevent user selection by applying the disabled attribute.

A group of radio components.

A vertical group of radio components.

Here’s an example of a radio in dropdown that you can use right away.

Below given example can be used to show a list of radio buttons inside a grouped list.

Use below example to group up radio button components inside a list.

Create a radio button group using the join and btn component classes.

Utilizing the custom-option class within the label enables the creation of custom radio buttons with improved styling and functionality.

Utilize the hidden TailwindCSS utility class to conceal the radio button.

Utilizing the custom-label-option class within the label demonstrates this distinctive styling approach, where the label background becomes primary when checked.

Customize the styling using utility classes according to your custom preferences, as illustrated below.

This example displays an image as a radio button.