Tailwind CSS Radio - Flowbite
Get started with the radio component to let the user choose a single option from multiple options in the form of a circle based on multiple styles and colors
The radio component can be used to allow the user to choose a single option from one or more available options coded with the utility classes from Tailwind CSS and available in multiple styles, variants, and colors and support dark mode.
Make sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the radio component.
Radio example #
Use the default example of a radio component with the checked and unchecked state.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
<div class="flex items-center mb-4">
<input id="default-radio-1" type="radio" value="" name="default-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
<label for="default-radio-1" class="select-none ms-2 text-sm font-medium text-heading">Default radio</label>
</div>
<div class="flex items-center">
<input checked id="default-radio-2" type="radio" value="" name="default-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
<label for="default-radio-2" class="select-none ms-2 text-sm font-medium text-heading">Checked state</label>
</div>
Disabled state #
Apply the disabled attribute to the radio component to disallow the selection for the user.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
<div class="flex items-center mb-4">
<input disabled id="disabled-radio-1" type="radio" value="" name="disabled-radio" class="w-4 h-4 text-neutral-primary border-light-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
<label for="disabled-radio-1" class="select-none ms-2 text-sm font-medium text-fg-disabled">Disabled radio</label>
</div>
<div class="flex items-center">
<input disabled checked id="disabled-radio-2" type="radio" value="" name="disabled-radio" class="w-4 h-4 text-neutral-primary border-light bg-neutral-secondary-medium rounded-full checked:border-default-medium focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
<label for="disabled-radio-2" class="select-none ms-2 text-sm font-medium text-fg-disabled">Disabled checked</label>
</div>
Radio link #
Use this example if you want to include an anchor tag inside the label of the radio component.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
<div class="flex items-center">
<input id="link-radio" type="radio" value="" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
<label for="link-radio" class="select-none ms-2 text-sm font-medium text-heading">Radio button with a <a href="#" class="text-fg-brand hover:underline font-medium">link inside</a>.</label>
</div>
Helper text #
Get started with this example if you want to add a secondary text to the label for the radio component.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
For orders shipped from $25 in books or $29 in other categories
<div class="flex">
<div class="flex items-center h-5">
<input id="helper-radio" aria-describedby="helper-radio-text" type="radio" value="" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
</div>
<div class="ms-2 text-sm select-none">
<label for="helper-radio" class="font-medium text-heading mb-1">Free shipping via Flowbite</label>
<p id="helper-radio-text" class="text-xs font-normal text-body">For orders shipped from $25 in books or $29 in other categories</p>
</div>
</div>
Bordered #
Use this example to show a radio input elements inside a card with border.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
<div class="flex items-center ps-4 border border-default bg-neutral-primary-soft rounded-base">
<input id="bordered-radio-1" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
<label for="bordered-radio-1" class="w-full py-4 select-none ms-2 text-sm font-medium text-heading">Default radio</label>
</div>
<div class="flex items-center ps-4 border border-default bg-neutral-primary-soft rounded-base">
<input checked id="bordered-radio-2" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
<label for="bordered-radio-2" class="w-full py-4 select-none ms-2 text-sm font-medium text-heading">Checked state</label>
</div>
Radio list group #
This example can be used to show a list of radio buttons inside a grouped list.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
Identification
<h3 class="mb-4 font-semibold text-heading">Identification</h3>
<ul class="w-48 bg-neutral-primary-soft border border-default rounded-base">
<li class="w-full border-b border-default">
<div class="flex items-center ps-3">
<input id="list-radio-license" type="radio" value="" name="list-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
<label for="list-radio-license" class="w-full py-3 select-none ms-2 text-sm font-medium text-heading">Driver License </label>
</div>
</li>
<li class="w-full border-b border-default">
<div class="flex items-center ps-3">
<input id="list-radio-id" type="radio" value="" name="list-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
<label for="list-radio-id" class="w-full py-3 select-none ms-2 text-sm font-medium text-heading">State ID</label>
</div>
</li>
<li class="w-full border-b border-default">
<div class="flex items-center ps-3">
<input id="list-radio-military" type="radio" value="" name="list-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
<label for="list-radio-military" class="w-full py-3 select-none ms-2 text-sm font-medium text-heading">US Military</label>
</div>
</li>
<li class="w-full border-b border-default">
<div class="flex items-center ps-3">
<input id="list-radio-passport" type="radio" value="" name="list-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
<label for="list-radio-passport" class="w-full py-3 select-none ms-2 text-sm font-medium text-heading">US Passport</label>
</div>
</li>
</ul>
Horizontal list group #
Use this example to group up radio button components inside a list.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
Identification
<h3 class="mb-4 font-semibold text-heading">Identification</h3>
<ul class="items-center w-full text-sm font-medium text-heading bg-neutral-primary-soft border border-default rounded-lg sm:flex">
<li class="w-full border-b border-default sm:border-b-0 sm:border-r">
<div class="flex items-center ps-3">
<input id="horizontal-list-radio-license" type="radio" value="" name="list-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
<label for="horizontal-list-radio-license" class="w-full py-3 select-none ms-2 text-sm font-medium text-heading">Driver License </label>
</div>
</li>
<li class="w-full border-b border-default sm:border-b-0 sm:border-r">
<div class="flex items-center ps-3">
<input id="horizontal-list-radio-id" type="radio" value="" name="list-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
<label for="horizontal-list-radio-id" class="w-full py-3 select-none ms-2 text-sm font-medium text-heading">State ID</label>
</div>
</li>
<li class="w-full border-b border-default sm:border-b-0 sm:border-r">
<div class="flex items-center ps-3">
<input id="horizontal-list-radio-military" type="radio" value="" name="list-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
<label for="horizontal-list-radio-military" class="w-full py-3 select-none ms-2 text-sm font-medium text-heading">US Military</label>
</div>
</li>
<li class="w-full">
<div class="flex items-center ps-3">
<input id="horizontal-list-radio-passport" type="radio" value="" name="list-radio" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
<label for="horizontal-list-radio-passport" class="w-full py-3 select-none ms-2 text-sm font-medium text-heading">US Passport</label>
</div>
</li>
</ul>
Radio in dropdown #
Here’s an example of a list group that you can use right away.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
<button id="dropdownHelperRadioButton" data-dropdown-toggle="dropdownHelperRadio" class="inline-flex items-center justify-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none" type="button">
Dropdown button
<svg class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
</button>
<!-- Dropdown menu -->
<div id="dropdownHelperRadio" class="z-10 hidden bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-56" data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="top">
<ul class="p-2 text-sm text-body font-medium" aria-labelledby="dropdownHelperRadioButton">
<li>
<div class="flex p-2 w-full hover:bg-neutral-tertiary-medium hover:text-heading rounded">
<div class="flex items-center h-5">
<input id="helper-radio-4" name="helper-radio" type="radio" value="" class="w-4 h-4 text-neutral-primary border-default-strong bg-neutral-secondary-strong rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
</div>
<div class="ms-2 text-sm">
<label for="helper-radio-4" class="select-none font-medium text-heading">
<div class="mb-1">Individual</div>
<p id="helper-radio-text-4" class="text-xs font-normal text-body">Some helpful instruction goes over here.</p>
</label>
</div>
</div>
</li>
<li>
<div class="flex p-2 w-full hover:bg-neutral-tertiary-medium hover:text-heading rounded">
<div class="flex items-center h-5">
<input id="helper-radio-5" name="helper-radio" type="radio" value="" class="w-4 h-4 text-neutral-primary border-default-strong bg-neutral-secondary-strong rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
</div>
<div class="ms-2 text-sm">
<label for="helper-radio-5" class="select-none font-medium text-heading">
<div class="mb-1">Company</div>
<p id="helper-radio-text-5" class="text-xs font-normal text-body">Some helpful instruction goes over here.</p>
</label>
</div>
</div>
</li>
<li>
<div class="flex p-2 w-full hover:bg-neutral-tertiary-medium hover:text-heading rounded">
<div class="flex items-center h-5">
<input id="helper-radio-6" name="helper-radio" type="radio" value="" class="w-4 h-4 text-neutral-primary border-default-strong bg-neutral-secondary-strong rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
</div>
<div class="ms-2 text-sm">
<label for="helper-radio-6" class="select-none font-medium text-heading">
<div class="mb-1">Non profit</div>
<p id="helper-radio-text-6" class="text-xs font-normal text-body">Some helpful instruction goes over here.</p>
</label>
</div>
</div>
</li>
</ul>
</div>
Inline layout #
Use the flex class for a wrapper element to horizontally align the radio elements.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
<div class="flex">
<div class="flex items-center me-4">
<input id="inline-radio" type="radio" value="" name="inline-radio-group" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
<label for="inline-radio" class="select-none ms-2 text-sm font-medium text-heading">Inline 1</label>
</div>
<div class="flex items-center me-4">
<input id="inline-2-radio" type="radio" value="" name="inline-radio-group" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
<label for="inline-2-radio" class="select-none ms-2 text-sm font-medium text-heading">Inline 2</label>
</div>
<div class="flex items-center me-4">
<input checked id="inline-checked-radio" type="radio" value="" name="inline-radio-group" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
<label for="inline-checked-radio" class="select-none ms-2 text-sm font-medium text-heading">Inline checked</label>
</div>
<div class="flex items-center">
<input disabled id="inline-disabled-radio" type="radio" value="" name="inline-radio-group" class="w-4 h-4 text-neutral-primary border-default-medium bg-neutral-secondary-medium rounded-full checked:border-brand focus:ring-2 focus:outline-none focus:ring-brand-subtle border border-default appearance-none">
<label for="inline-disabled-radio" class="select-none ms-2 text-sm font-medium text-fg-disabled">Inline disabled</label>
</div>
</div>
Advanced layout #
Use this example of a more advanced radio component to add more information and update the style of the whole card instead of just the circled dot.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
How much do you expect to use each month?
<h3 class="mb-5 text-lg font-medium text-gray-900 dark:text-white">How much do you expect to use each month?</h3>
<ul class="grid w-full gap-6 md:grid-cols-2">
<li>
<input type="radio" id="hosting-small" name="hosting" value="hosting-small" class="hidden peer" required />
<label for="hosting-small" class="inline-flex items-center justify-between w-full p-5 text-body bg-neutral-primary-soft border-1 border-default rounded-base cursor-pointer peer-checked:hover:bg-brand-softer peer-checked:border-brand-subtle peer-checked:bg-brand-softer hover:bg-neutral-secondary-medium peer-checked:text-fg-brand-strong">
<div class="block">
<div class="w-full font-semibold">0-50 MB</div>
<div class="w-full">Good for small websites</div>
</div>
<svg class="w-5 h-5 ms-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m14 0-4 4m4-4-4-4"/></svg>
</label>
</li>
<li>
<input type="radio" id="hosting-big" name="hosting" value="hosting-big" class="hidden peer">
<label for="hosting-big" class="inline-flex items-center justify-between w-full w-full p-5 text-body bg-neutral-primary-soft border-1 border-default rounded-base cursor-pointer peer-checked:hover:bg-brand-softer peer-checked:border-brand-subtle peer-checked:bg-brand-softer hover:bg-neutral-secondary-medium peer-checked:text-fg-brand-strong">
<div class="block">
<div class="w-full font-semibold">500-1000 MB</div>
<div class="w-full">Good for large websites</div>
</div>
<svg class="w-5 h-5 ms-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m14 0-4 4m4-4-4-4"/></svg>
</label>
</li>
</ul>
Advanced layout with icons #
Use this example to show an advanced layout of radio button elements with icons.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
Choose technology:
<h3 class="mb-4 text-lg font-medium text-heading">Choose technology:</h3>
<ul class="select-none grid w-full gap-4 md:grid-cols-3">
<li>
<input type="radio" id="react-option" value="react-option" name="technologies" class="hidden peer" required="" checked>
<label for="react-option" class="inline-flex items-center justify-between w-full p-5 text-body bg-neutral-primary-soft border-1 border-default rounded-base cursor-pointer peer-checked:hover:bg-brand-softer peer-checked:border-brand-subtle peer-checked:bg-brand-softer hover:bg-neutral-secondary-medium peer-checked:text-fg-brand-strong">
<div class="block">
<svg class="mb-2 w-7 h-7 text-sky-600" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z"/></svg>
<div class="w-full font-medium mb-1">React Js</div>
<div class="w-full text-sm">A JavaScript library for building user interfaces.</div>
</div>
</label>
</li>
<li>
<input type="radio" id="vue-option" value="vue-option" name="technologies" class="hidden peer">
<label for="vue-option" class="inline-flex items-center justify-between w-full p-5 text-body bg-neutral-primary-soft border-1 border-default rounded-base cursor-pointer peer-checked:hover:bg-brand-softer peer-checked:border-brand-subtle peer-checked:bg-brand-softer hover:bg-neutral-secondary-medium peer-checked:text-fg-brand-strong">
<div class="block">
<svg class="mb-2 text-success w-7 h-7" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M356.9 64.3H280l-56 88.6-48-88.6H0L224 448 448 64.3h-91.1zm-301.2 32h53.8L224 294.5 338.4 96.3h53.8L224 384.5 55.7 96.3z"/></svg>
<div class="w-full font-medium mb-1">Vue Js</div>
<div class="w-full text-sm">An model–view front end JavaScript framework.</div>
</div>
</label>
</li>
<li>
<input type="radio" id="angular-option" value="angular-option" name="technologies" class="hidden peer">
<label for="angular-option" class="inline-flex items-center justify-between w-full p-5 text-body bg-neutral-primary-soft border-1 border-default rounded-base cursor-pointer peer-checked:hover:bg-brand-softer peer-checked:border-brand-subtle peer-checked:bg-brand-softer hover:bg-neutral-secondary-medium peer-checked:text-fg-brand-strong">
<div class="block">
<svg class="mb-2 text-danger w-7 h-7" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M185.7 268.1h76.2l-38.1-91.6-38.1 91.6zM223.8 32L16 106.4l31.8 275.7 176 97.9 176-97.9 31.8-275.7zM354 373.8h-48.6l-26.2-65.4H168.6l-26.2 65.4H93.7L223.8 81.5z"/></svg>
<div class="w-full font-medium mb-1">Angular</div>
<div class="w-full text-sm">A TypeScript-based web application framework.</div>
</div>
</label>
</li>
</ul>