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 |
|---|---|---|
| radio | Component | Targets radio input. |
| radio-inset | Component | Targets radio input. |
| label | Component | For helper text. |
| custom-option | Component | For custom radio container. |
| custom-label-option | Component | For custom radio container with background. |
| radio-primary | Modifier | Adds ‘primary’ color to radio. |
| radio-secondary | Modifier | Adds ‘secondary’ color to radio. |
| radio-accent | Modifier | Adds ‘accent’ color to radio. |
| radio-info | Modifier | Adds ‘info’ color to radio. |
| radio-success | Modifier | Adds ‘success’ color to radio. |
| radio-warning | Modifier | Adds ‘warning’ color to radio. |
| radio-error | Modifier | Adds ’error’ color to radio. |
| is-valid | Modifier | Adds success style to the input. |
| is-invalid | Modifier | Adds error style to the input. |
| radio-xs | Responsive | Radio with extra small size. |
| radio-sm | Responsive | Radio with small size. |
| radio-lg | Responsive | Radio with large size. |
Basic radio example.
<div class="flex items-center gap-1">
<input type="radio" name="radio-0" class="radio" id="defaultRadio1" />
<label class="label label-text text-base" for="defaultRadio1"> Default </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" name="radio-0" class="radio" id="defaultRadio2" checked />
<label class="label label-text text-base" for="defaultRadio2"> Checked </label>
</div>Use the label class along with label-text for the main label and label-text-alt for helper text, applying styling through Tailwind CSS classes.
<div class="flex gap-3">
<input type="radio" name="radio-1" class="radio radio-primary" id="radioDelete" />
<label class="label -mt-1 cursor-pointer flex-col items-start pt-0" for="radioDelete">
<span class="label-text text-base">Delete</span>
<span class="label-text-alt">Notify me when this action happens.</span>
</label>
</div>
<div class="flex gap-3">
<input type="radio" name="radio-1" class="radio radio-primary" id="radioArchieve" checked />
<label class="label -mt-1 cursor-pointer flex-col items-start pt-0" for="radioArchieve">
<span class="label-text text-base">Archive</span>
<span class="label-text-alt">Notify me when this action happens.</span>
</label>
</div>Apply the radio class to style radio buttons.
<div class="flex items-center gap-1">
<input type="radio" name="radio-2" class="radio radio-primary" id="radioType1" />
<label class="label label-text text-base" for="radioType1"> Default </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" name="radio-2" class="radio radio-primary" id="radioType2" checked />
<label class="label label-text text-base" for="radioType2"> Checked </label>
</div>To apply a semantically colored inset border, replace the radio class with the radio-inset class.
<div class="flex items-center gap-1">
<input type="radio" name="radio-3" class="radio-inset radio-inset-primary" id="radioType3" />
<label class="label label-text text-base" for="radioType3"> Default </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" name="radio-3" class="radio-inset radio-inset-primary" id="radioType4" checked/>
<label class="label label-text text-base" for="radioType4"> Checked </label>
</div>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.
<div class="flex items-center gap-1">
<input type="radio" id="radio-default" class="radio" id="radioDefault1" checked />
<label class="label label-text text-base" for="radioDefault1"> Default </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" id="radio-primary" class="radio radio-primary" id="radioPrimary1" checked />
<label class="label label-text text-base" for="radioPrimary1"> Primary </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" id="radio-secondary" class="radio radio-secondary" id="radioSecondary1" checked />
<label class="label label-text text-base" for="radioSecondary1"> Secondary </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" id="radio-accent" class="radio radio-accent" id="radioAccent1" checked />
<label class="label label-text text-base" for="radioAccent1"> Accent </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" id="radio-info" class="radio radio-info" id="radioInfo1" checked />
<label class="label label-text text-base" for="radioInfo1"> Info </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" id="radio-success" class="radio radio-success" id="radioSuccess1" checked />
<label class="label label-text text-base" for="radioSuccess1"> Success </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" id="radio-warning" class="radio radio-warning" for="radioWarning1" checked />
<label class="label label-text text-base" for="radioWarning1"> Warning </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" id="radio-error" class="radio radio-error" for="radioError1" checked />
<label class="label label-text text-base" for="radioError1"> Error </label>
</div>Use the radio-inset-{semantic-color} class in combination with the radio-inset class.
<div class="flex items-center gap-1">
<input type="radio" id="radio-inset-default" class="radio-inset" id="radioDefault2" checked />
<label class="label label-text text-base" for="radioDefault2"> Default </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" id="radio-inset-primary" class="radio-inset radio-inset-primary" id="radioPrimary2" checked />
<label class="label label-text text-base" for="radioPrimary2"> Primary </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" id="radio-inset-secondary" class="radio-inset radio-inset-secondary" id="radioSecondary2" checked />
<label class="label label-text text-base" for="radioSecondary2"> Secondary </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" id="radio-inset-accent" class="radio-inset radio-inset-accent" id="radioAccent2" checked />
<label class="label label-text text-base" for="radioAccent2"> Accent </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" id="radio-inset-info" class="radio-inset radio-inset-info" id="radioInfo2" checked />
<label class="label label-text text-base" for="radioInfo2"> Info </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" id="radio-inset-success" class="radio-inset radio-inset-success" id="radioSuccess2" checked />
<label class="label label-text text-base" for="radioSuccess2"> Success </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" id="radio-inset-warning" class="radio-inset radio-inset-warning" id="radioWarning2" checked />
<label class="label label-text text-base" for="radioWarning2"> Warning </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" id="radio-inset-error" class="radio-inset radio-inset-error" id="radioError2" checked />
<label class="label label-text text-base" for="radioError2"> Error </label>
</div>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.
<div class="flex items-center gap-1">
<input type="radio" name="radio-4" class="radio checked:border-yellow-500 checked:bg-yellow-500" id="radioCustomColor1" />
<label class="label label-text text-base" for="radioCustomColor1"> Yellow </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" name="radio-4" class="radio checked:border-purple-500 checked:bg-purple-500" id="radioCustomColor2" checked />
<label class="label label-text text-base" for="radioCustomColor2"> Purple </label>
</div>For the custom state, simply modify the border colors.
<div class="flex items-center gap-1">
<input type="radio" name="radio-5" class="radio-inset checked:border-yellow-500" id="radioCustomColor3" />
<label class="label label-text text-base" for="radioCustomColor3"> Yellow </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" name="radio-5" class="radio-inset checked:border-purple-500" id="radioCustomColor4" checked />
<label class="label label-text text-base" for="radioCustomColor4"> Purple </label>
</div>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.
<div class="flex items-center">
<input type="radio" name="radio-6" class="radio radio-xs radio-primary" id="radioExtraSmall1" />
<label class="label label-text text-xs" for="radioExtraSmall1"> Extra small </label>
</div>
<div class="flex items-center gap-0.5">
<input type="radio" name="radio-6" class="radio radio-sm radio-primary" id="radioSmall1" />
<label class="label label-text" for="radioSmall1"> Small </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" name="radio-6" class="radio radio-primary" id="radioSizeDefault1" checked />
<label class="label label-text text-base" for="radioSizeDefault1"> Default </label>
</div>
<div class="flex items-center gap-1.5">
<input type="radio" name="radio-6" class="radio radio-lg radio-primary" id="radioLarge1" />
<label class="label label-text text-lg" for="radioLarge1"> Large </label>
</div>Custom radio sizes example.
<div class="flex items-center">
<input type="radio" name="radio-7" class="radio-inset radio-xs radio-inset-primary" id="radioExtraSmall2" />
<label class="label label-text text-xs" for="radioExtraSmall2"> Extra small </label>
</div>
<div class="flex items-center gap-0.5">
<input type="radio" name="radio-7" class="radio-inset radio-sm radio-inset-primary" id="radioSmall2" />
<label class="label label-text" for="radioSmall2"> Small </label>
</div>
<div class="flex items-center gap-1">
<input type="radio" name="radio-7" class="radio-inset radio-inset-primary" id="radioSizeDefault2" checked />
<label class="label label-text text-base" for="radioSizeDefault2"> Default </label>
</div>
<div class="flex items-center gap-1.5">
<input type="radio" name="radio-7" class="radio-inset radio-lg radio-inset-primary" id="radioLarge" />
<label class="label label-text text-lg" for="radioLarge"> Large </label>
</div>Success state can be show using is-valid class.
<div class="flex gap-3">
<input type="radio" name="radio-success" class="radio radio-primary is-valid" id="radioStateSuccess1" checked />
<label class="label -mt-1 cursor-pointer flex-col items-start p-0" for="radioStateSuccess1">
<span class="label-text text-base">Delete</span>
<span class="label-text-alt">Notify me when this action happens.</span>
</label>
</div>
<div class="flex gap-3">
<input type="radio" name="radio-success" class="radio-inset radio-inset-primary is-valid" id="radioStateSuccess2" checked />
<label class="label -mt-1 cursor-pointer flex-col items-start p-0" for="radioStateSuccess2">
<span class="label-text text-base">Archive</span>
<span class="label-text-alt">Notify me when this action happens.</span>
</label>
</div>Error state can be show using is-invalid class.
<div class="flex gap-3">
<input type="radio" name="radio-error" class="radio radio-primary is-invalid" id="radioStateError1" />
<label class="label -mt-1 cursor-pointer flex-col items-start p-0" for="radioStateError1">
<span class="label-text text-base">Delete</span>
<span class="label-text-alt">Notify me when this action happens.</span>
</label>
</div>
<div class="flex gap-3">
<input type="radio" name="radio-error" class="radio-inset radio-inset-primary is-invalid" id="radioStateError2" />
<label class="label -mt-1 cursor-pointer flex-col items-start p-0" for="radioStateError2">
<span class="label-text text-base">Archive</span>
<span class="label-text-alt">Notify me when this action happens.</span>
</label>
</div>Disable the radio component to prevent user selection by applying the disabled attribute.
<div class="space-x-3 rtl:space-x-reverse">
<input type="radio" name="radio-8" class="radio" aria-label="disabled radio" checked disabled />
<input type="radio" name="radio-8" class="radio" aria-label="disabled radio" disabled />
</div>
<div class="space-x-3 rtl:space-x-reverse">
<input type="radio" name="radio-9" class="radio-inset" aria-label="disabled radio" checked disabled />
<input type="radio" name="radio-9" class="radio-inset" aria-label="disabled radio" disabled />
</div>A group of radio components.
<div class="flex gap-4 horizontal-scrollbar">
<div class="flex items-center gap-2">
<input type="radio" name="radio-10" class="radio radio-primary" id="radioInline1" />
<label class="label label-text text-base" for="radioInline1"> Vue </label>
</div>
<div class="flex items-center gap-2">
<input type="radio" name="radio-10" class="radio radio-primary" id="radioInline2" checked />
<label class="label label-text text-base" for="radioInline2"> Angular </label>
</div>
<div class="flex items-center gap-2">
<input type="radio" name="radio-10" class="radio radio-primary" id="radioInline3" />
<label class="label label-text text-base" for="radioInline3"> React </label>
</div>
</div>A vertical group of radio components.
<div class="flex flex-col gap-2">
<div class="flex items-center gap-2">
<input type="radio" name="radio-11" class="radio radio-primary" id="radioVertical1" />
<label class="label label-text text-base" for="radioVertical1"> Vue </label>
</div>
<div class="flex items-center gap-2">
<input type="radio" name="radio-11" class="radio radio-primary" id="radioVertical2" checked />
<label class="label label-text text-base" for="radioVertical2"> Angular </label>
</div>
<div class="flex items-center gap-2">
<input type="radio" name="radio-11" class="radio radio-primary" id="radioVertical3" />
<label class="label label-text text-base" for="radioVertical3"> React </label>
</div>
</div>Here’s an example of a radio in dropdown that you can use right away.
To learn more about dropdowns, refer to the
Dropdown
documentation.
<div class="dropdown relative inline-flex [--auto-close:inside] rtl:[--placement:bottom-end]">
<button id="dropdown-radio" type="button" class="dropdown-toggle btn btn-primary" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Dropdown radio
<span class="icon-[tabler--chevron-down] dropdown-open:rotate-180 size-4"></span>
</button>
<div class="dropdown-menu dropdown-open:opacity-100 hidden min-w-60" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-radio">
<div class="dropdown-item flex-col items-center gap-4 sm:flex-row sm:items-start">
<input name="radio-12" type="radio" class="radio radio-primary mt-2" id="radioDropdown1" checked />
<label class="label cursor-pointer flex-col items-center sm:items-start" for="radioDropdown1">
<span class="label-text font-semibold">Rename</span>
<span class="label-text-alt text-base-content/50">Notify me when this action happens.</span>
</label>
</div>
<div class="dropdown-item flex-col items-center gap-4 sm:flex-row sm:items-start">
<input name="radio-12" type="radio" class="radio radio-primary mt-2" id="radioDropdown2" />
<label class="label cursor-pointer flex-col items-center sm:items-start" for="radioDropdown2">
<span class="label-text font-semibold">Move</span>
<span class="label-text-alt text-base-content/50">Notify me when this action happens.</span>
</label>
</div>
</div>
</div>Below given example can be used to show a list of radio buttons inside a grouped list.
Select you favourite language:
<h6 class="text-base text-base-content mb-1">Select you favourite language:</h6>
<div class="max-w-sm">
<ul class="border-base-content/25 divide-base-content/25 divide-y rounded-box border first:*:rounded-t-box last:*:rounded-b-box">
<li>
<label class="flex cursor-pointer items-center gap-3 p-3">
<input type="radio" name="radio-13" class="radio radio-primary" />
<span class="label label-text text-base"> C++ </span>
</label>
</li>
<li>
<label class="flex cursor-pointer items-center gap-3 p-3">
<input type="radio" name="radio-13" class="radio radio-primary" checked />
<span class="label label-text text-base"> Ruby </span>
</label>
</li>
<li>
<label class="flex cursor-pointer items-center gap-3 p-3">
<input type="radio" name="radio-13" class="radio radio-primary" />
<span class="label label-text text-base"> Swift </span>
</label>
</li>
</ul>
</div>Use below example to group up radio button components inside a list.
Select you favourite language:
<h6 class="text-base text-base-content mb-1">Select you favourite language:</h6>
<div class="w-full">
<ul
class="border-base-content/25 divide-base-content/25 flex
flex-col divide-y rounded-box border first:*:rounded-t-box last:*:rounded-b-box sm:flex-row
sm:divide-x sm:divide-y-0 first:*:sm:rounded-s-box first:*:sm:rounded-tr-none last:*:sm:rounded-e-box
last:*:sm:rounded-bl-none rtl:divide-x-reverse">
<li class="w-full">
<label class="flex cursor-pointer items-center gap-2 p-3">
<input type="radio" name="radio-14" class="radio radio-primary ms-3" />
<span class="label label-text text-base"> Python </span>
</label>
</li>
<li class="w-full">
<label class="flex cursor-pointer items-center gap-2 p-3">
<input type="radio" name="radio-14" class="radio radio-primary ms-3" checked />
<span class="label label-text text-base"> JavaScript </span>
</label>
</li>
<li class="w-full">
<label class="flex cursor-pointer items-center gap-2 p-3">
<input type="radio" name="radio-14" class="radio radio-primary ms-3" />
<span class="label label-text text-base"> Java </span>
</label>
</li>
</ul>
</div>Create a radio button group using the join and btn component classes.
To learn more about Radio, refer to the
Join
documentation.
<div class="join drop-shadow">
<input class="join-item btn" type="radio" name="radio-15" aria-label="Radio 1" checked/>
<input class="join-item btn" type="radio" name="radio-15" aria-label="Radio 2" />
<input class="join-item btn" type="radio" name="radio-15" aria-label="Radio 3" />
</div>Utilizing the custom-option class within the label enables the creation of custom radio buttons with improved styling and functionality.
<div class="flex w-full items-start gap-3 flex-wrap sm:flex-nowrap">
<label class="custom-option flex sm:w-1/2 flex-row items-start gap-3">
<input type="radio" name="radio-16" class="radio radio-primary radio-sm" checked />
<span class="-mt-1 w-full text-start">
<span class="label">
<span class="label-text text-base">Basic</span>
<span class="label-text-alt text-base-content/50 text-base">Free</span>
</span>
<span class="label">
<span class="label-text-alt text-sm">Get 1 project with 1 teams members.</span>
</span>
</span>
</label>
<label class="custom-option flex sm:w-1/2 flex-row items-start gap-3">
<input type="radio" name="radio-16" class="radio radio-primary radio-sm" />
<span class="-mt-1 w-full text-start">
<span class="label">
<span class="label-text text-base">Premium</span>
<span class="label-text-alt text-base-content/50 text-base">$ 5.00</span>
</span>
<span class="label">
<span class="label-text-alt text-sm">Get 5 projects with 5 team members.</span>
</span>
</span>
</label>
</div>Utilize the hidden TailwindCSS utility class to conceal the radio button.
<div class="flex w-full items-start gap-3 flex-wrap sm:flex-nowrap">
<label class="custom-option flex sm:w-1/2 flex-row items-start gap-3">
<input type="radio" name="radio-17" class="radio hidden" checked />
<span class="-mt-1 w-full text-start">
<span class="label">
<span class="label-text text-base">Basic</span>
<span class="label-text-alt text-base-content/50 text-base">Free</span>
</span>
<span class="label">
<span class="label-text-alt text-sm">Get 1 project with 1 teams members.</span>
</span>
</span>
</label>
<label class="custom-option flex sm:w-1/2 flex-row items-start gap-3">
<input type="radio" name="radio-17" class="radio hidden" />
<span class="-mt-1 w-full text-start">
<span class="label">
<span class="label-text text-base">Premium</span>
<span class="label-text-alt text-base-content/50 text-base">$ 5.00</span>
</span>
<span class="label">
<span class="label-text-alt text-sm">Get 5 projects with 5 team members.</span>
</span>
</span>
</label>
</div>Utilizing the custom-label-option class within the label demonstrates this distinctive styling approach, where the label background becomes primary when checked.
<div class="flex w-full items-start gap-3 flex-wrap sm:flex-nowrap">
<label class="custom-label-option flex sm:w-1/2 flex-row items-start gap-3">
<input type="radio" name="radio-18" class="radio radio-primary radio-sm" checked />
<span class="-mt-1 w-full text-start">
<span class="label">
<span class="label-text text-base">Basic</span>
<span class="label-text-alt text-base-content/50 text-base">Free</span>
</span>
<span class="label">
<span class="label-text-alt text-sm">Get 1 project with 1 teams members.</span>
</span>
</span>
</label>
<label class="custom-label-option flex sm:w-1/2 flex-row items-start gap-3">
<input type="radio" name="radio-18" class="radio radio-primary radio-sm" />
<div class="-mt-1 w-full text-start">
<span class="label">
<span class="label-text text-base">Premium</span>
<span class="label-text-alt text-base-content/50 text-base">$ 5.00</span>
</span>
<span class="label">
<span class="label-text-alt text-sm">Get 5 projects with 5 team members.</span>
</span>
</div>
</label>
</div>Customize the styling using utility classes according to your custom preferences, as illustrated below.
<div class="flex w-full items-start gap-3 flex-wrap sm:flex-nowrap">
<label class="custom-option flex sm:w-1/2 flex-col items-center gap-3">
<span class="icon-[tabler--rocket] size-10"></span>
<span class="w-full">
<span class="label flex-col !pb-0">
<span class="label-text mb-1 text-base">Starter</span>
<span class="label-text-alt text-sm"> Cake sugar plum fruitcake I love sweet roll jelly-o</span>
</span>
</span>
<input type="radio" name="radio-19" class="radio radio-primary radio-sm" />
</label>
<label class="custom-option flex sm:w-1/2 flex-col items-center gap-3">
<span class="icon-[tabler--user] size-10"></span>
<span class="w-full">
<span class="label flex-col !pb-0">
<span class="label-text mb-1 text-base">Personal</span>
<span class="label-text-alt text-sm">Cake sugar plum fruitcake I love sweet roll jelly-o. </span>
</span>
</span>
<input type="radio" name="radio-19" class="radio radio-primary radio-sm" checked />
</label>
<label class="custom-option flex sm:w-1/2 flex-col items-center gap-3">
<span class="icon-[tabler--crown] size-10"></span>
<span class="w-full">
<span class="label flex-col !pb-0">
<span class="label-text mb-1 text-base">Enterprise</span>
<span class="label-text-alt text-sm">Cake sugar plum fruitcake I love sweet roll jelly-o.</span>
</span>
</span>
<input type="radio" name="radio-19" class="radio radio-primary radio-sm" />
</label>
</div>This example displays an image as a radio button.
<div class="flex items-start gap-3 flex-nowrap">
<label class="custom-option p-0">
<span class="w-full">
<img src="https://cdn.flyonui.com/fy-assets/components/radio/image-6.png" class="bg-contain" alt="Radio image"/>
</span>
<input type="radio" name="radio-20" class="radio hidden" />
</label>
<label class="custom-option p-0">
<span class="w-full">
<img src="https://cdn.flyonui.com/fy-assets/components/radio/image-3.png" class="bg-contain" alt="Radio image"/>
</span>
<input type="radio" name="radio-20" class="radio hidden" checked />
</label>
<label class="custom-option p-0">
<span class="w-full">
<img src="https://cdn.flyonui.com/fy-assets/components/radio/image-5.png" class="bg-contain" alt="Radio image"/>
</span>
<input type="radio" name="radio-20" class="radio hidden" />
</label>
</div>
