forms
Tailwind CSS Radio
The radio component allows users to select a single option from multiple choices using Tailwind CSS utility classes. It comes in various styles, variants, and colors.
Class Name | Type | Description |
|---|---|---|
| radio | Component | Targets radio input. |
| radio-inset | Component | Targets radio input. |
| form-control | Component | Container element. |
| 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.
<label class=" form-control flex items-center gap-1">
<input type="radio" name="radio-0" class="radio" />
<span class="label cursor-pointer">
<span class="label-text text-base">Default</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" name="radio-0" class="radio" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Checked</span>
</span>
</label>Utilize the form-control class in conjunction with a label tag and implement styling using Tailwind CSS classes.
<label class="form-control flex gap-3">
<input type="radio" name="radio-1" class="radio radio-primary" />
<span class="label -mt-1 cursor-pointer flex-col items-start pt-0">
<span class="label-text text-base">Delete</span>
<span class="label-text-alt">Notify me when this action happens.</span>
</span>
</label>
<label class="form-control flex gap-3">
<input type="radio" name="radio-1" class="radio radio-primary" checked />
<span class="label -mt-1 cursor-pointer flex-col items-start pt-0">
<span class="label-text text-base">Archive</span>
<span class="label-text-alt">Notify me when this action happens.</span>
</span>
</label>Apply the radio class to style radio buttons.
<label class=" form-control flex items-center gap-1">
<input type="radio" name="radio-2" class="radio radio-primary" />
<span class="label cursor-pointer">
<span class="label-text text-base">Default</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" name="radio-2" class="radio radio-primary" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Checked</span>
</span>
</label>To apply a semantically colored inset border, replace the radio class with the radio-inset class.
<label class=" form-control flex items-center gap-1">
<input type="radio" name="radio-3" class="radio-inset radio-inset-primary" />
<span class="label cursor-pointer">
<span class="label-text text-base">Default</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" name="radio-3" class="radio-inset radio-inset-primary" checked/>
<span class="label cursor-pointer">
<span class="label-text text-base">Checked</span>
</span>
</label>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.
<label class=" form-control flex items-center gap-1">
<input type="radio" id="radio-default" class="radio" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Default</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" id="radio-primary" class="radio radio-primary" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Primary</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" id="radio-secondary" class="radio radio-secondary" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Secondary</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" id="radio-accent" class="radio radio-accent" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Accent</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" id="radio-info" class="radio radio-info" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Info</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" id="radio-success" class="radio radio-success" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Success</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" id="radio-warning" class="radio radio-warning" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Warning</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" id="radio-error" class="radio radio-error" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Error</span>
</span>
</label>Use the radio-inset-{semantic-color} class in combination with the radio-inset class.
<label class=" form-control flex items-center gap-1">
<input type="radio" id="radio-inset-default" class="radio-inset" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Default</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" id="radio-inset-primary" class="radio-inset radio-inset-primary" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Primary</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" id="radio-inset-secondary" class="radio-inset radio-inset-secondary" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Secondary</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" id="radio-inset-accent" class="radio-inset radio-inset-accent" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Accent</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" id="radio-inset-info" class="radio-inset radio-inset-info" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Info</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" id="radio-inset-success" class="radio-inset radio-inset-success" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Success</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" id="radio-inset-warning" class="radio-inset radio-inset-warning" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Warning</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" id="radio-inset-error" class="radio-inset radio-inset-error" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Error</span>
</span>
</label>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.
<label class=" form-control flex items-center gap-1">
<input type="radio" name="radio-4" class="radio checked:border-yellow-500 checked:bg-yellow-500" />
<span class="label cursor-pointer">
<span class="label-text text-base">Yellow</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" name="radio-4" class="radio checked:border-purple-500 checked:bg-purple-500" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Purple</span>
</span>
</label>For the custom state, simply modify the border colors.
<label class=" form-control flex items-center gap-1">
<input type="radio" name="radio-5" class="radio-inset checked:border-yellow-500" />
<span class="label cursor-pointer">
<span class="label-text text-base">Yellow</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" name="radio-5" class="radio-inset checked:border-purple-500" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Purple</span>
</span>
</label>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.
<label class="form-control flex items-center">
<input type="radio" name="radio-6" class="radio radio-xs radio-primary" />
<span class="label cursor-pointer">
<span class="label-text text-xs">Extra small</span>
</span>
</label>
<label class="form-control flex items-center gap-0.5">
<input type="radio" name="radio-6" class="radio radio-sm radio-primary" />
<span class="label cursor-pointer">
<span class="label-text text-sm">Small</span>
</span>
</label>
<label class="form-control flex items-center gap-1">
<input type="radio" name="radio-6" class="radio radio-primary" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Default</span>
</span>
</label>
<label class=" form-control flex items-center gap-1.5">
<input type="radio" name="radio-6" class="radio radio-lg radio-primary" />
<span class="label cursor-pointer">
<span class="label-text text-lg">Large</span>
</span>
</label>Custom radio sizes example.
<label class=" form-control flex items-center">
<input type="radio" name="radio-7" class="radio-inset radio-xs radio-inset-primary" />
<span class="label cursor-pointer">
<span class="label-text text-xs">Extra small</span>
</span>
</label>
<label class=" form-control flex items-center gap-0.5">
<input type="radio" name="radio-7" class="radio-inset radio-sm radio-inset-primary" />
<span class="label cursor-pointer">
<span class="label-text text-sm">Small</span>
</span>
</label>
<label class=" form-control flex items-center gap-1">
<input type="radio" name="radio-7" class="radio-inset radio-inset-primary" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Default</span>
</span>
</label>
<label class=" form-control flex items-center gap-1.5">
<input type="radio" name="radio-7" class="radio-inset radio-lg radio-inset-primary" />
<span class="label cursor-pointer">
<span class="label-text text-lg">Large</span>
</span>
</label>Success state can be show using is-valid class.
<label class="form-control flex gap-3">
<input type="radio" name="radio-success" class="radio radio-primary is-valid" checked />
<span class="label -mt-1 cursor-pointer flex-col items-start p-0">
<span class="label-text text-base">Delete</span>
<span class="label-text-alt">Notify me when this action happens.</span>
</span>
</label>
<label class=" form-control flex gap-3">
<input type="radio" name="radio-success" class="radio-inset radio-inset-primary is-valid" checked />
<span class="label -mt-1 cursor-pointer flex-col items-start p-0">
<span class="label-text text-base">Archive</span>
<span class="label-text-alt">Notify me when this action happens.</span>
</span>
</label>Error state can be show using is-invalid class.
<label class="form-control flex gap-3">
<input type="radio" name="radio-error" class="radio radio-primary is-invalid" />
<span class="label -mt-1 cursor-pointer flex-col items-start p-0">
<span class="label-text text-base">Delete</span>
<span class="label-text-alt">Notify me when this action happens.</span>
</span>
</label>
<label class="form-control flex gap-3">
<input type="radio" name="radio-error" class="radio-inset radio-inset-primary is-invalid" />
<span class="label -mt-1 cursor-pointer flex-col items-start p-0">
<span class="label-text text-base">Archive</span>
<span class="label-text-alt">Notify me when this action happens.</span>
</span>
</label>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" checked disabled />
<input type="radio" name="radio-8" class="radio" disabled />
</div>
<div class="space-x-3 rtl:space-x-reverse">
<input type="radio" name="radio-9" class="radio-inset" checked disabled />
<input type="radio" name="radio-9" class="radio-inset" disabled />
</div>A group of radio components.
<div class="flex gap-4 horizontal-scrollbar">
<label class="form-control flex items-center gap-2">
<input type="radio" name="radio-10" class="radio radio-primary" />
<span class="label cursor-pointer">
<span class="label-text text-base">Vue</span>
</span>
</label>
<label class="form-control flex items-center gap-2">
<input type="radio" name="radio-10" class="radio radio-primary" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Angular</span>
</span>
</label>
<label class="form-control flex items-center gap-2">
<input type="radio" name="radio-10" class="radio radio-primary" />
<span class="label cursor-pointer">
<span class="label-text text-base">React</span>
</span>
</label>
</div>A vertical group of radio components.
<div class="flex flex-col gap-2">
<label class="form-control flex items-center gap-2">
<input type="radio" name="radio-11" class="radio radio-primary" />
<span class="label cursor-pointer">
<span class="label-text text-base">Vue</span>
</span>
</label>
<label class="form-control flex items-center gap-2">
<input type="radio" name="radio-11" class="radio radio-primary" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Angular</span>
</span>
</label>
<label class="form-control flex items-center gap-2">
<input type="radio" name="radio-11" class="radio radio-primary" />
<span class="label cursor-pointer">
<span class="label-text text-base">React</span>
</span>
</label>
</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">
<label 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" checked />
<div class="label cursor-pointer flex-col items-center sm:items-start">
<span class="label-text font-semibold">Rename</span>
<span class="label-text-alt text-base-content/50">Notify me when this action happens.</span>
</div>
</label>
<label 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" />
<div class="label cursor-pointer flex-col items-center sm:items-start">
<span class="label-text font-semibold">Move</span>
<span class="label-text-alt text-base-content/50">Notify me when this action happens.</span>
</div>
</label>
</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="label-text text-base">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 *:p-3 first:*:rounded-t-box last:*:rounded-b-box">
<li>
<label class=" form-control flex items-center gap-3">
<input type="radio" name="radio-13" class="radio radio-primary" />
<span class="label cursor-pointer">
<span class="label-text text-base">C++</span>
</span>
</label>
</li>
<li>
<label class=" form-control flex items-center gap-3">
<input type="radio" name="radio-13" class="radio radio-primary" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">Ruby</span>
</span>
</label>
</li>
<li>
<label class=" form-control flex items-center gap-3">
<input type="radio" name="radio-13" class="radio radio-primary" />
<span class="label cursor-pointer">
<span class="label-text text-base">Swift</span>
</span>
</label>
</li>
</ul>
</div>Use below example to group up radio button components inside a list.
Select you favourite language:
<h6 class="label-text text-base">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 *:p-3 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="form-control flex items-center gap-2">
<input type="radio" name="radio-14" class="radio radio-primary ms-3" />
<span class="label cursor-pointer">
<span class="label-text text-base">Python</span>
</span>
</label>
</li>
<li class="w-full">
<label class="form-control flex items-center gap-2">
<input type="radio" name="radio-14" class="radio radio-primary ms-3" checked />
<span class="label cursor-pointer">
<span class="label-text text-base">JavaScript</span>
</span>
</label>
</li>
<li class="w-full">
<label class="form-control flex items-center gap-2">
<input type="radio" name="radio-14" class="radio radio-primary ms-3" />
<span class="label cursor-pointer">
<span class="label-text text-base">Java</span>
</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 />
<div 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>
</div>
</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" />
<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>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 />
<div 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>
</div>
</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" />
<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>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 />
<div 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>
</div>
</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>
<div 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>
</div>
<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>
<div 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>
</div>
<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>
<div 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>
</div>
<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">
<div class="w-full">
<img src="https://cdn.flyonui.com/fy-assets/components/radio/image-6.png" class="bg-contain" alt="Radio image"/>
</div>
<input type="radio" name="radio-20" class="radio hidden" />
</label>
<label class="custom-option p-0">
<div class="w-full">
<img src="https://cdn.flyonui.com/fy-assets/components/radio/image-3.png" class="bg-contain" alt="Radio image"/>
</div>
<input type="radio" name="radio-20" class="radio hidden" checked />
</label>
<label class="custom-option p-0">
<div class="w-full">
<img src="https://cdn.flyonui.com/fy-assets/components/radio/image-5.png" class="bg-contain" alt="Radio image"/>
</div>
<input type="radio" name="radio-20" class="radio hidden" />
</label>
</div>
