Skip to content
HyperUI

No results found.

Back to application components

Radio Groups

Radio group input components for forms, settings, and user preferences in web applications with responsive, customizable designs.

2/3 Dark Mode (Request)Updated: N/ANo commit information available.

Base

markmead

<fieldset class="space-y-3">
  <legend class="sr-only">Delivery</legend>

  <div>
    <label
      for="DeliveryStandard"
      class="flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600"
    >
      <p class="text-gray-700">Standard</p>

      <p class="text-gray-900">Free</p>

      <input
        type="radio"
        name="DeliveryOption"
        value="DeliveryStandard"
        id="DeliveryStandard"
        class="sr-only"
        checked
      />
    </label>
  </div>

  <div>
    <label
      for="DeliveryPriority"
      class="flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600"
    >
      <p class="text-gray-700">Next Day</p>

      <p class="text-gray-900">£9.99</p>

      <input
        type="radio"
        name="DeliveryOption"
        value="DeliveryPriority"
        id="DeliveryPriority"
        class="sr-only"
      />
    </label>
  </div>
</fieldset>

Base (Dark)

markmead

<fieldset class="space-y-3">
  <legend class="sr-only">Delivery</legend>

  <div>
    <label
      for="DeliveryStandard"
      class="flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800"
    >
      <p class="text-gray-700 dark:text-gray-200">Standard</p>

      <p class="text-gray-900 dark:text-white">Free</p>

      <input
        type="radio"
        name="DeliveryOption"
        value="DeliveryStandard"
        id="DeliveryStandard"
        class="sr-only"
        checked
      />
    </label>
  </div>

  <div>
    <label
      for="DeliveryPriority"
      class="flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800"
    >
      <p class="text-gray-700 dark:text-gray-200">Next Day</p>

      <p class="text-gray-900 dark:text-white">£9.99</p>

      <input
        type="radio"
        name="DeliveryOption"
        value="DeliveryPriority"
        id="DeliveryPriority"
        class="sr-only"
      />
    </label>
  </div>
</fieldset>

Base with input

markmead

<fieldset class="space-y-3">
  <legend class="sr-only">Delivery</legend>

  <div>
    <label
      for="DeliveryStandard"
      class="flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600"
    >
      <div>
        <p class="text-gray-700">Standard</p>

        <p class="text-gray-900">Free</p>
      </div>

      <input
        type="radio"
        name="DeliveryOption"
        value="DeliveryStandard"
        id="DeliveryStandard"
        class="size-5 border-gray-300"
        checked
      />
    </label>
  </div>

  <div>
    <label
      for="DeliveryPriority"
      class="flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600"
    >
      <div>
        <p class="text-gray-700">Next Day</p>

        <p class="text-gray-900">£9.99</p>
      </div>

      <input
        type="radio"
        name="DeliveryOption"
        value="DeliveryPriority"
        id="DeliveryPriority"
        class="size-5 border-gray-300"
      />
    </label>
  </div>
</fieldset>

Plugins: @tailwindcss/forms

Base with input (Dark)

markmead

<fieldset class="space-y-3">
  <legend class="sr-only">Delivery</legend>

  <div>
    <label
      for="DeliveryStandard"
      class="flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800"
    >
      <div>
        <p class="text-gray-700 dark:text-gray-200">Standard</p>

        <p class="text-gray-900 dark:text-white">Free</p>
      </div>

      <input
        type="radio"
        name="DeliveryOption"
        value="DeliveryStandard"
        id="DeliveryStandard"
        class="size-5 border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
        checked
      />
    </label>
  </div>

  <div>
    <label
      for="DeliveryPriority"
      class="flex items-center justify-between gap-4 rounded border border-gray-300 bg-white p-3 text-sm font-medium shadow-sm transition-colors hover:bg-gray-50 has-checked:border-blue-600 has-checked:ring-1 has-checked:ring-blue-600 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800"
    >
      <div>
        <p class="text-gray-700 dark:text-gray-200">Next Day</p>

        <p class="text-gray-900 dark:text-white">£9.99</p>
      </div>

      <input
        type="radio"
        name="DeliveryOption"
        value="DeliveryPriority"
        id="DeliveryPriority"
        class="size-5 border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600"
      />
    </label>
  </div>
</fieldset>

Plugins: @tailwindcss/forms

Color variant

markmead

<fieldset class="flex flex-wrap gap-3">
  <legend class="sr-only">Color</legend>

  <label
    for="ColorBlack"
    class="block size-8 rounded-full bg-black shadow-sm has-checked:ring-2 has-checked:ring-black has-checked:ring-offset-2"
  >
    <input
      type="radio"
      name="ColorOption"
      value="ColorBlack"
      id="ColorBlack"
      class="sr-only"
      checked
    />

    <span class="sr-only">Black</span>
  </label>

  <label
    for="ColorRed"
    class="block size-8 rounded-full bg-red-500 shadow-sm has-checked:ring-2 has-checked:ring-red-500 has-checked:ring-offset-2"
  >
    <input type="radio" name="ColorOption" value="ColorRed" id="ColorRed" class="sr-only" />

    <span class="sr-only">Red</span>
  </label>

  <label
    for="ColorBlue"
    class="block size-8 rounded-full bg-blue-500 shadow-sm has-checked:ring-2 has-checked:ring-blue-500 has-checked:ring-offset-2"
  >
    <input type="radio" name="ColorOption" value="ColorBlue" id="ColorBlue" class="sr-only" />

    <span class="sr-only">Blue</span>
  </label>

  <label
    for="ColorGold"
    class="block size-8 rounded-full bg-amber-500 shadow-sm has-checked:ring-2 has-checked:ring-amber-500 has-checked:ring-offset-2"
  >
    <input type="radio" name="ColorOption" value="ColorGold" id="ColorGold" class="sr-only" />

    <span class="sr-only">Gold</span>
  </label>
</fieldset>

Related components

View all application components