Application toolkit - Radio

A radio input allows people to select only one option from a number of choices. Radio is generally displayed in a radio group.

Default

The default way to present a single option from a list.

Open this default radio example in new window
Copy default radio code 
<div class="flex flex-col gap-2">
  <div class="flex">
    <input type="radio" name="hs-default-radio" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-hs2-primary-600 pointer-events-none focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-default-radio">
    <label for="hs-default-radio" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Default radio</label>
  </div>

  <div class="flex">
    <input type="radio" name="hs-default-radio" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-hs2-primary-600 pointer-events-none focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-checked-radio" checked>
    <label for="hs-checked-radio" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Checked radio</label>
  </div>
</div>
Close default radio code

Disabled

Disabled radio.

Open this disabled radio example in new window
Copy disabled radio code 
<div class="flex flex-col gap-2">
  <div class="flex opacity-40">
    <input type="radio" name="hs-disabled-radio" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-disabled-radio" disabled>
    <label for="hs-disabled-radio" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Disabled radio</label>
  </div>

  <div class="flex opacity-40">
    <input type="radio" name="hs-disabled-radio" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-disabled-checked-radio" checked disabled>
    <label for="hs-disabled-checked-radio" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Disabled checked radio</label>
  </div>
</div>
Close disabled radio code

Inline radio group

A group of radio components.

Open this inline group radio example in new window
Copy inline group radio code 
<div class="flex gap-x-6">
  <div class="flex">
    <input type="radio" name="hs-radio-group" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-radio-group-1" checked>
    <label for="hs-radio-group-1" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Apple</label>
  </div>

  <div class="flex">
    <input type="radio" name="hs-radio-group" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-radio-group-2">
    <label for="hs-radio-group-2" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Pear</label>
  </div>

  <div class="flex">
    <input type="radio" name="hs-radio-group" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-radio-group-3">
    <label for="hs-radio-group-3" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Orange</label>
  </div>
</div>
Close inline group radio code

Vertical radio group

A vertical group of radio components.

Open this vertical group radio example in new window
Copy vertical group radio code 
<div class="flex flex-col gap-y-3">
  <div class="flex">
    <input type="radio" name="hs-radio-vertical-group" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-radio-vertical-group-1" checked>
    <label for="hs-radio-vertical-group-1" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Apple</label>
  </div>

  <div class="flex">
    <input type="radio" name="hs-radio-vertical-group" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-radio-vertical-group-2">
    <label for="hs-radio-vertical-group-2" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Pear</label>
  </div>

  <div class="flex">
    <input type="radio" name="hs-radio-vertical-group" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-radio-vertical-group-3">
    <label for="hs-radio-vertical-group-3" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Orange</label>
  </div>
</div>
Close vertical group radio code

List with description

Open this list with description radio example in new window
Copy list with description radio code 
<div class="grid space-y-3">
  <div class="relative flex items-start">
    <div class="flex items-center h-5 mt-1">
      <input id="hs-radio-delete" name="hs-radio-with-description" type="radio" class="border-gray-200 rounded-full text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" aria-describedby="hs-radio-delete-description" checked>
    </div>
    <label for="hs-radio-delete" class="ml-3">
      <span class="block text-sm font-semibold text-gray-800 dark:text-gray-300">Delete</span>
      <span id="hs-radio-delete-description" class="block text-sm text-gray-600 dark:text-gray-500">Notify me when this action happens.</span>
    </label>
  </div>

  <div class="relative flex items-start">
    <div class="flex items-center h-5 mt-1">
      <input id="hs-radio-archive" name="hs-radio-with-description" type="radio" class="border-gray-200 rounded-full text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" aria-describedby="hs-radio-archive-description">
    </div>
    <label for="hs-radio-archive" class="ml-3">
      <span class="block text-sm font-semibold text-gray-800 dark:text-gray-300">Archive</span>
      <span id="hs-radio-archive-description" class="block text-sm text-gray-600 dark:text-gray-500">Notify me when this action happens.</span>
    </label>
  </div>
</div>
Close list with description radio code

Radio within form input

Radio components within form input stacked in a grid format.

Open this within form input radio example in new window
Copy within form input radio code 
<div class="grid sm:grid-cols-2 gap-2">
  <label for="hs-radio-in-form" class="flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
    <input type="radio" name="hs-radio-in-form" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-hs2-primary-600 pointer-events-none focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-radio-in-form">
    <span class="text-sm text-gray-500 ml-3 dark:text-gray-400">Default radio</span>
  </label>

  <label for="hs-radio-checked-in-form" class="flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
    <input type="radio" name="hs-radio-in-form" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-hs2-primary-600 pointer-events-none focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-radio-checked-in-form" checked>
    <span class="text-sm text-gray-500 ml-3 dark:text-gray-400">Checked radio</span>
  </label>
</div>
Close within form input radio code

Checkbox components within form input vertically grouped.

Open this within form input vertical radio example in new window
Copy within form input vertical radio code 
<div class="grid space-y-2">
  <label for="hs-vertical-radio-in-form" class="max-w-xs flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
    <input type="radio" name="hs-vertical-radio-in-form" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-hs2-primary-600 pointer-events-none focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-vertical-radio-in-form">
    <span class="text-sm text-gray-500 ml-3 dark:text-gray-400">Default radio</p>
  </label>

  <label for="hs-vertical-radio-checked-in-form" class="max-w-xs flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
    <input type="radio" name="hs-vertical-radio-in-form" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-hs2-primary-600 pointer-events-none focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-vertical-radio-checked-in-form" checked>
    <span class="text-sm text-gray-500 ml-3 dark:text-gray-400">Checked radio</p>
  </label>
</div>
Close within form input vertical radio code

On right

Checkbox placed on the right side.

Open this on right radio example in new window
Copy on right radio code 
<div class="grid sm:grid-cols-2 gap-2">
  <label for="hs-radio-on-right" class="flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
    <span class="text-sm text-gray-500 dark:text-gray-400">Default radio</span>
    <input type="radio" name="hs-radio-on-right" class="shrink-0 ml-auto mt-0.5 border-gray-200 rounded-full text-hs2-primary-600 pointer-events-none focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-radio-on-right">
  </label>

  <label for="hs-radioradio-on-right" class="flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
    <span class="text-sm text-gray-500 dark:text-gray-400">Checked radio</span>
    <input type="radio" name="hs-radio-on-right" class="shrink-0 ml-auto mt-0.5 border-gray-200 rounded-full text-hs2-primary-600 pointer-events-none focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-radioradio-on-right" checked>
  </label>
</div>
Close on right radio code

With list group

Make the list item appear with checkbox.

Open this list group radio example in new window
Copy list group radio code 
<ul class="max-w-sm flex flex-col">
  <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
    <div class="relative flex items-start w-full">
      <div class="flex items-center h-5">
        <input id="hs-list-group-item-checkbox-1" name="hs-list-group-item-checkbox-1" type="checkbox" class="border-gray-200 rounded text-hs2-primary focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" checked="">
      </div>
      <label for="hs-list-group-item-checkbox-1" class="ml-3.5 block w-full text-sm text-gray-600 dark:text-gray-500">
        Chris Lynch
      </label>
    </div>
  </li>

  <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
    <div class="relative flex items-start w-full">
      <div class="flex items-center h-5">
        <input id="hs-list-group-item-checkbox-2" name="hs-list-group-item-checkbox-2" type="checkbox" class="border-gray-200 rounded text-hs2-primary focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800">
      </div>
      <label for="hs-list-group-item-checkbox-2" class="ml-3.5 block w-full text-sm text-gray-600 dark:text-gray-500">
        Maria Guan
      </label>
    </div>
  </li>

  <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
    <div class="relative flex items-start w-full">
      <div class="flex items-center h-5">
        <input id="hs-list-group-item-checkbox-3" name="hs-list-group-item-checkbox-3" type="checkbox" class="border-gray-200 rounded text-hs2-primary focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800">
      </div>
      <label for="hs-list-group-item-checkbox-3" class="ml-3.5 block w-full text-sm text-gray-600 dark:text-gray-500">
        Bob Arum
      </label>
    </div>
  </li>
</ul>
Close list group radio code

With horizontal list group

Make a horizontal list group item appear with checkbox.

Open this list group horizontal radio example in new window
Copy list group horizontal radio code 
<ul class="flex flex-col sm:flex-row">
  <li class="inline-flex items-center gap-x-2.5 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ml-px sm:mt-0 sm:first:rounded-tr-none sm:first:rounded-bl-lg sm:last:rounded-bl-none sm:last:rounded-tr-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
    <div class="relative flex items-start w-full">
      <div class="flex items-center h-5">
        <input id="hs-horizontal-list-group-item-checkbox-1" name="hs-horizontal-list-group-item-checkbox-1" type="checkbox" class="border-gray-200 rounded text-hs2-primary focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked="">
      </div>
      <label for="hs-horizontal-list-group-item-checkbox-1" class="ml-3.5 block w-full text-sm text-gray-600 dark:text-gray-500">
        Chris Lynch
      </label>
    </div>
  </li>

  <li class="inline-flex items-center gap-x-2.5 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ml-px sm:mt-0 sm:first:rounded-tr-none sm:first:rounded-bl-lg sm:last:rounded-bl-none sm:last:rounded-tr-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
    <div class="relative flex items-start w-full">
      <div class="flex items-center h-5">
        <input id="hs-horizontal-list-group-item-checkbox-2" name="hs-horizontal-list-group-item-checkbox-2" type="checkbox" class="border-gray-200 rounded text-hs2-primary focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
      </div>
      <label for="hs-horizontal-list-group-item-checkbox-2" class="ml-3.5 block w-full text-sm text-gray-600 dark:text-gray-500">
        Maria Guan
      </label>
    </div>
  </li>

  <li class="inline-flex items-center gap-x-2.5 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ml-px sm:mt-0 sm:first:rounded-tr-none sm:first:rounded-bl-lg sm:last:rounded-bl-none sm:last:rounded-tr-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
    <div class="relative flex items-start w-full">
      <div class="flex items-center h-5">
        <input id="hs-horizontal-list-group-item-checkbox-3" name="hs-horizontal-list-group-item-checkbox-3" type="checkbox" class="border-gray-200 rounded text-hs2-primary focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
      </div>
      <label for="hs-horizontal-list-group-item-checkbox-3" class="ml-3.5 block w-full text-sm text-gray-600 dark:text-gray-500">
        Bob Arum
      </label>
    </div>
  </li>
</ul>
Close list group horizontal radio code