Components
Tailwind CSS Radio Components - Madhuranjan UI
Explore a comprehensive collection of radio button components built with Tailwind CSS. These components offer a range of styles from basic defaults to advanced card layouts with titles and descriptions ensuring accessible, responsive, and visually engaging form controls.
This curated selection of radio components demonstrates various design approaches using Tailwind CSS. Whether you need a standard radio button, a disabled variant, or an innovative layout with integrated links, helper text, or even a dropdown, these examples are tailored to elevate your form interactions.
Default Radio
A classic radio button with standard styling, ideal for simple selections.
1<div class="flex flex-col gap-3 justify-center items-center p-2 md:p-5">
2 <label class="inline-flex cursor-pointer items-center">
3 <input
4 type="radio"
5 name="radioGroup"
6 class="appearance-none h-6 w-6 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-all duration-200
7 checked:bg-violet-600 dark:checked:bg-blue-600 checked:border-violet-600 dark:checked:border-blue-600
8 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-blue-500"
9 />
10 <span class="ml-2 font-medium text-gray-800 dark:text-gray-50">Disabled Radio
A radio button rendered in a disabled state to clearly indicate non-interactivity.
1<div class="flex flex-col items-center justify-center gap-3 p-2 md:p-5">
2 <label class="inline-flex cursor-not-allowed items-center opacity-60">
3 <input
4 type="radio"
5 disabled
6 class="appearance-none h-6 w-6 rounded-full border-2 border-gray-300 dark:border-gray-600 transition-all duration-200 focus:ring-2 focus:ring-violet-500 dark:focus:ring-blue-500 focus:outline-none"
7 />
8 <span class="ml-2 font-medium text-gray-800 dark:text-gray-50">
9 Disabled Unchecked Radio
10 </span>Radio with Link
This radio button integrates an embedded link for additional context, useful for accepting terms or providing extra information.
1<div class="flex flex-col items-center justify-center gap-3 p-2 md:p-5">
2 <label class="inline-flex cursor-pointer items-center">
3 <input type="radio" name="agreement" class="relative h-6 w-6 appearance-none rounded-full border-2 border-gray-300 transition-all duration-200 checked:border-violet-600 checked:bg-violet-600 checked:after:absolute checked:after:inset-1 checked:after:rounded-full checked:after:bg-white focus:ring-2 focus:ring-violet-500 focus:outline-none dark:border-gray-600 dark:checked:border-blue-600 dark:checked:bg-blue-600 dark:checked:after:bg-gray-900 dark:focus:ring-blue-500" />
4 <span class="ml-2 font-medium text-gray-800 dark:text-gray-50">
5 I agree to the
6 <a href="#" class="text-violet-600 hover:text-violet-800 hover:underline dark:text-blue-500 dark:hover:text-blue-400"> Terms & Conditions </a>
7 </span>
8 </label>
9</div>
10Radio with Helper Text
A radio button that offers helper text to guide users, ensuring clarity and improved usability.
By selecting this option, you confirm that you have carefully read, understood, and agreed to abide by our Terms & Conditions.
1<div class="flex flex-col gap-2 justify-center items-start p-4">
2 <label class="inline-flex items-center cursor-pointer">
3 <input
4 type="radio"
5 name="termsAgreement"
6 class="relative appearance-none h-6 w-6 cursor-pointer rounded-full border-2 border-gray-300 dark:border-gray-600 transition-all duration-200
7 checked:border-violet-600 dark:checked:border-blue-600 checked:bg-violet-600 dark:checked:bg-blue-600
8 checked:after:absolute checked:after:inset-1 checked:after:rounded-full checked:after:bg-white dark:checked:after:bg-gray-900
9 focus:ring-2 focus:ring-violet-500 dark:focus:ring-blue-500 focus:outline-none"
10 />Border Radio
A radio button styled with a border for a modern and minimalist design.
1<div class="flex items-center justify-center bg-gray-100 p-4 dark:bg-gray-900">
2 <div class="flex gap-4 md:flex-row">
3 <label class="flex cursor-pointer items-center rounded-md border border-gray-300 px-4 py-2 text-gray-800 transition-colors hover:border-violet-500 dark:border-gray-600 dark:text-gray-200 dark:hover:border-blue-500">
4 <input type="radio" name="example" defaultChecked class="form-radio h-5 w-5 text-violet-600 focus:ring-2 focus:ring-violet-500 focus:outline-none dark:text-blue-600 dark:focus:ring-blue-500" />
5 <span class="ml-2">Default Radio</span>
6 </label>
7
8 <label class="flex cursor-pointer items-center rounded-md border border-gray-300 px-4 py-2 text-gray-800 transition-colors hover:border-violet-500 dark:border-gray-600 dark:text-gray-200 dark:hover:border-blue-500">
9 <input type="radio" name="example" class="form-radio h-5 w-5 text-violet-600 focus:ring-2 focus:ring-violet-500 focus:outline-none dark:text-blue-600 dark:focus:ring-blue-500" />
10 <span class="ml-2">Alternate Option</span>Radio Dropdown
An innovative radio component integrated within a dropdown, allowing for compact and efficient selection.
1<div class="flex justify-center items-center p-5">
2 <div class="group relative inline-block text-left">
3 <button
4 type="button"
5 class="inline-flex w-56 items-center justify-between rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:ring-2 focus:ring-violet-500 focus:ring-offset-2 focus:ring-offset-gray-100 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:ring-offset-gray-800"
6 >
7 Select Option
8 <svg
9 class="-mr-1 ml-2 h-5 w-5"
10 xmlns="http://www.w3.org/2000/svg"Colored Radio
A vibrant radio button variant featuring accent colors that enhance the visual appeal of your forms.
1<div class="flex flex-wrap items-center justify-center gap-4 p-5">
2 <!-- {/* Red */} -->
3 <div class="flex items-center">
4 <input id="red-radio" type="radio" name="color-radio" class="h-4 w-4 appearance-none rounded-full border-2 border-gray-300 checked:bg-red-600 focus:ring-2 focus:ring-red-500 dark:border-gray-600 dark:checked:bg-red-600 dark:focus:ring-red-600" />
5 <label htmlFor="red-radio" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Red</label>
6 </div>
7
8 <!-- {/* Orange */} -->
9 <div class="flex items-center">
10 <input id="orange-radio" type="radio" name="color-radio" class="h-4 w-4 appearance-none rounded-full border-2 border-gray-300 checked:bg-orange-500 focus:ring-2 focus:ring-orange-500 dark:border-gray-600 dark:checked:bg-orange-500 dark:focus:ring-orange-600" />Radio with Title and Description
This radio button variant includes a title and a brief description, providing users with additional context for their selection.
1<div class="p-5 max-w-md mx-auto">
2 <ul class="space-y-4">
3 <li>
4 <label class="flex items-start gap-3 cursor-pointer">
5 <input type="radio" name="plan" class="mt-1 h-5 w-5 text-violet-600 dark:text-blue-500 border-gray-300 dark:border-gray-600 focus:ring-violet-500 dark:focus:ring-blue-500" />
6 <div>
7 <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Basic Plan</p>
8 <p class="text-sm text-gray-500 dark:text-gray-400">5 Projects / 10 GB Storage / Email Support</p>
9 </div>
10 </label>Radio Card with Title and Description
An advanced radio component presented as a card, combining a title, description, and engaging visuals for a rich user experience.
Storage Options
View performance details
1<div class="mx-auto max-w-2xl bg-white p-6 shadow-md dark:bg-gray-800">
2 <h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">Storage Options</h3>
3
4 <div class="space-y-3">
5 <!-- Option 1 -->
6 <label class="flex cursor-pointer items-center rounded-lg border border-gray-200 p-4 transition hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700">
7 <input type="radio" name="storage" value="256" class="h-5 w-5 text-blue-600 dark:text-blue-500" checked />
8 <span class="ml-3 min-w-[60px] font-medium text-gray-900 dark:text-white">256 GB</span>
9 <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Basic storage for essential apps</span>
10 </label>