Tailwind CSS Radio

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
    class="radio opacity-0 cursor-pointer absolute z-10"
    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
    class="radio opacity-0 cursor-pointer absolute z-10"
    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>