Getting started

Components

Navigation

Forms

Methods

Design Blocks

Tailwind Radios component

Responsive radios built with Tailwind CSS. Limits the user to one selection, from a list of preset options. The singular property of a radio button makes it distinct from a checkbox.

Basic example

Radio buttons are most commonly used when you have a group of mutually exclusive choices and only one choice from that group is allowed.

c 
        
            
      <div class="flex justify-center">
        <div>
          <div class="form-check">
            <input class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
            <label class="form-check-label inline-block text-gray-800" for="flexRadioDefault1">
              Default radio
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
            <label class="form-check-label inline-block text-gray-800" for="flexRadioDefault2">
              Default checked radio
            </label>
          </div>
        </div>
      </div>

Disabled

Use disabled attribute to both the label and the input to disable radio buttons component.

        
            
      <div class="flex justify-center">
        <div>
          <div class="form-check">
            <input class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
            <label class="form-check-label inline-block text-gray-800 opacity-50" for="flexRadioDisabled">
              Disabled radio
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
            <label class="form-check-label inline-block text-gray-800 opacity-50" for="flexRadioCheckedDisabled">
              Disabled checked radio
            </label>
          </div>
        </div>
      </div>

Inline

Group radios in the same horizontal row by adding .form-check-inline to any .form-check.

        
            
      <div class="flex justify-center">
        <div class="form-check form-check-inline">
          <input class="form-check-input form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
          <label class="form-check-label inline-block text-gray-800" for="inlineRadio10">1</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
          <label class="form-check-label inline-block text-gray-800" for="inlineRadio20">2</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
          <label class="form-check-label inline-block text-gray-800 opacity-50" for="inlineRadio30">3 (disabled)</label>
        </div>
      </div>

Without labels

Omit the wrapping .form-check for radios that have no label text.

        
            
      <div class="flex justify-center">
        <div>
          <div class="form-check">
            <input class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 my-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="radio" name="flexRadioDefault" id="flexRadioDefault10">
          </div>
          <div class="form-check">
            <input class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 my-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="radio" name="flexRadioDefault" id="flexRadioDefault20" checked>
          </div>
        </div>
      </div>

If you are looking for more advanced options, try Bootstrap Radio Button from MDBootstrap.