Radio

<!-- Default -->
<label class="flex gap-8px items-center relative has-disabled:cursor-no-drop has-disabled:text-black-500 dark:has-disabled:text-black-300 cursor-pointer text-p2">
  <input
    type="radio"
    name="radio"
    id="radio-M"
    value="M"
    class="flex items-center justify-center border bg-white rounded-full appearance-none relative dark:bg-black w-24px h-24px checked:before:w-12px checked:before:h-12px checked:before:rounded-full checked:before:bg-black checked:before:inline-block dark:checked:before:bg-white cursor-pointer border-black-300 hover:border-black disabled:bg-black-50 disabled:border-black-100 dark:border-black-500 dark:hover:border-white dark:disabled:bg-black-800 dark:disabled:border-black-700">
  </input>
  <svg
    width="10"
    height="10"
    viewbox="0 0 10 10"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none hidden peer-checked:block">
    <circle
      cx="5"
      cy="5"
      r="5"
      fill="currentColor">
    </circle>
  </svg>
  <span class="peer-disabled:text-black-500 dark:has-disabled:text-black-300">
    Text
  </span>
</label>
<!-- Small -->
<label class="flex gap-8px items-center relative has-disabled:cursor-no-drop has-disabled:text-black-500 dark:has-disabled:text-black-300 cursor-pointer text-p3">
  <input
    type="radio"
    name="radio"
    id="radio-S"
    value="S"
    class="flex items-center justify-center border bg-white rounded-full appearance-none relative dark:bg-black w-16px h-16px checked:before:w-8px checked:before:h-8px checked:before:rounded-full checked:before:bg-black checked:before:inline-block dark:checked:before:bg-white cursor-pointer border-black-300 hover:border-black disabled:bg-black-50 disabled:border-black-100 dark:border-black-500 dark:hover:border-white dark:disabled:bg-black-800 dark:disabled:border-black-700">
  </input>
  <svg
    width="8"
    height="8"
    viewbox="0 0 8 8"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none hidden peer-checked:block">
    <circle
      cx="4"
      cy="4"
      r="4"
      fill="currentColor">
    </circle>
  </svg>
  <span class="peer-disabled:text-black-500 dark:has-disabled:text-black-300">
    Text
  </span>
</label>