Basic Forms

Tailwind CSS Radio

A radio input allows people to select only one option from a number of choices. Radio is generally displayed in a radio group.

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

Basic usage

The default way to present a single option from a list.

Default radio

Checked radio

Disabled radio.

Disabled radio

Disabled checked radio

A group of radio components.

Apple

Pear

Orange

A vertical group of radio components.

Apple

Pear

Orange

Delete Notify me when this action happens.

Archive Notify me when this action happens.

Radio components within form input stacked in a grid format.

Default radio Checked radio

Checkbox components within form input vertically grouped.

Default radio Checked radio

Checkbox placed on the right side.

Default radio Checked radio

Make the list item appear with checkbox.

Make a horizontal list group item appear with checkbox.

It provides valuable, actionable feedback to your users with HTML5 form validation.

This is an error radio

This is a success radio