Our Tailwind CSS radio button component will let your users choose only one of a predefined set of mutually exclusive options. Radio buttons should be used instead of checkboxes if only one item can be selected from a list.
Use the following example to create simple radio buttons for your projects.
<div class="form-check flex">
<input
name="inputName"
class="radio absolute z-10 cursor-pointer opacity-0"
type="radio"
id="flexRadioDefault1"
/>
<div class="form-check-input"></div>
<label class="custom-control-label my-auto" for="flexRadioDefault1"
>Default radio</label
>
</div>
<div class="form-check flex">
<input
name="inputName"
class="radio absolute z-10 cursor-pointer opacity-0"
type="radio"
id="flexRadioDefault2"
checked
/>
<div class="form-check-input"></div>
<label class="custom-control-label my-auto" for="flexRadioDefault2"
>Default checked radio</label
>
</div>