Radio

<div class="mx-auto max-w-md p-6">
  <fieldset>
    <legend class="mb-5 font-medium text-gray-900">How many times have you eaten sushi?</legend>
    <div class="space-y-4">
      <div class="flex items-center">
        <input
          name="sushi"
          type="radio"
          id="sushi-1"
          class="size-5 appearance-none rounded-full border border-gray-300 checked:border-[6px] checked:border-gray-500 focus:outline-0 focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
        />
        <label for="sushi-1" class="ml-4 text-sm text-gray-900"> 0-5 times </label>
      </div>

      <div class="flex items-center">
        <input
          name="sushi"
          type="radio"
          id="sushi-2"
          class="size-5 appearance-none rounded-full border border-gray-300 checked:border-[6px] checked:border-gray-500 focus:outline-0 focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
        />
        <label for="sushi-2" class="ml-4 text-sm text-gray-900"> 6-10 times </label>
      </div>

      <div class="flex items-center">
        <input
          name="sushi"
          type="radio"
          id="sushi-3"
          class="size-5 appearance-none rounded-full border border-gray-300 checked:border-[6px] checked:border-gray-500 focus:outline-0 focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
        />
        <label for="sushi-3" class="ml-4 text-sm text-gray-900"> More than 10 times </label>
      </div>
    </div>
  </fieldset>
</div>

<div class="mx-auto max-w-lg p-6">
  <fieldset>
    <legend class="mb-5 font-medium text-gray-900">Color theme</legend>
    <div class="-m-1.5 inline-flex flex-wrap items-center">
      <div class="inline-flex items-center space-x-2 p-1.5">
        <input
          name="color-theme"
          type="radio"
          id="color-theme-1"
          class="peer size-5 appearance-none rounded-full border border-gray-300 checked:border-[6px] checked:border-gray-500 focus:outline-0 focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
        />
        <label for="color-theme-1" class="text-sm text-gray-900"> Follow system preference </label>
      </div>

      <div class="inline-flex items-center space-x-2 p-1.5">
        <input
          name="color-theme"
          type="radio"
          id="color-theme-2"
          class="peer size-5 appearance-none rounded-full border border-gray-300 checked:border-[6px] checked:border-gray-500 focus:outline-0 focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
        />
        <label for="color-theme-2" class="text-sm text-gray-900"> Light mode </label>
      </div>

      <div class="inline-flex items-center space-x-2 p-1.5">
        <input
          name="color-theme"
          type="radio"
          id="color-theme-3"
          class="peer size-5 appearance-none rounded-full border border-gray-300 checked:border-[6px] checked:border-gray-500 focus:outline-0 focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
          disabled
        />
        <label for="color-theme-3" class="text-sm text-gray-900 peer-disabled:text-gray-400"> Dark mode </label>
      </div>
    </div>
  </fieldset>
</div>

<div class="mx-auto max-w-4xl p-6">
  <fieldset>
    <legend class="mb-5 font-medium text-gray-900">What is your current employment status?</legend>
    <div class="grid gap-4 sm:grid-cols-2">
      <div class="relative">
        <input
          name="employment-status"
          type="radio"
          id="employment-status-1"
          class="peer absolute left-6 top-7 size-5 appearance-none rounded-full border border-gray-300 checked:border-[6px] checked:border-gray-500 focus:outline-0 focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
        />
        <label
          for="employment-status-1"
          class="block h-full cursor-pointer rounded-lg border border-gray-300 p-6 pl-14 transition peer-checked:border-gray-400 peer-checked:bg-gray-50"
        >
          <div class="font-medium text-gray-900">Employed full-time</div>
          <div class="mt-4 text-sm text-gray-700">
            If you select this option, you are currently employed and working full-time. This means that you are working a typical number of hours
            per week for your industry or occupation.
          </div>
        </label>
      </div>

      <div class="relative">
        <input
          name="employment-status"
          type="radio"
          id="employment-status-2"
          class="peer absolute left-6 top-7 size-5 appearance-none rounded-full border border-gray-300 checked:border-[6px] checked:border-gray-500 focus:outline-0 focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
        />
        <label
          for="employment-status-2"
          class="block h-full cursor-pointer rounded-lg border border-gray-300 p-6 pl-14 transition peer-checked:border-gray-400 peer-checked:bg-gray-50"
        >
          <div class="font-medium text-gray-900">Unemployed</div>
          <div class="mt-4 text-sm text-gray-700">
            If you select this option, you are currently not employed and are not actively looking for work. This could be because you are a
            student, a retiree, or are taking time off for other reasons.
          </div>
        </label>
      </div>
    </div>
  </fieldset>
</div>