Radio
Exclusive option selector from a set.
Radio
<!-- Default -->
<label class="flex gap-8px text-p2 items-center cursor-pointer relative has-disabled:cursor-no-drop ">
<input type="radio"
class="flex items-center justify-center border bg-background w-24px h-24px rounded-full appearance-none relative checked:before:w-12px checked:before:h-12px checked:before:rounded-full checked:before:bg-foreground checked:before:inline-block cursor-pointer border-black-300 hover:border-foreground disabled:bg-black-50 disabled:border-black-100"
name="radio"
value="M"
id="radio-M" />
<svg width="16"
height="12"
viewBox="0 0 16 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="absolute left-[4px] hidden fill-white peer-checked:flex">
<path
d="M6.14756 8.14806C5.95213 8.34437 5.63434 8.34437 5.4389 8.14806L2.61431 5.31096C2.13224 4.82675 1.34838 4.82675 0.866308 5.31096C0.387241 5.79215 0.387241 6.57006 0.866307 7.05125L5.08456 11.2882C5.47544 11.6808 6.11102 11.6808 6.5019 11.2882L15.1337 2.61816C15.6128 2.13697 15.6128 1.35906 15.1337 0.877871C14.6516 0.393665 13.8678 0.393665 13.3857 0.877872L6.14756 8.14806Z"/>
</svg>
<span class="peer-disabled:text-black-500">Text</span>
</label>
<label class="flex gap-8px text-p2 items-center cursor-pointer relative has-disabled:cursor-no-drop ">
<input type="radio"
class="flex items-center justify-center border bg-background w-24px h-24px rounded-full appearance-none relative checked:before:w-12px checked:before:h-12px checked:before:rounded-full checked:before:bg-foreground checked:before:inline-block cursor-pointer border-black-300 hover:border-foreground disabled:bg-black-50 disabled:border-black-100"
name="radio"
disabled
value="Disabled-M"
id="radio-Disabled-M" />
<svg width="16"
height="12"
viewBox="0 0 16 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="absolute left-[4px] hidden fill-white peer-checked:flex">
<path
d="M6.14756 8.14806C5.95213 8.34437 5.63434 8.34437 5.4389 8.14806L2.61431 5.31096C2.13224 4.82675 1.34838 4.82675 0.866308 5.31096C0.387241 5.79215 0.387241 6.57006 0.866307 7.05125L5.08456 11.2882C5.47544 11.6808 6.11102 11.6808 6.5019 11.2882L15.1337 2.61816C15.6128 2.13697 15.6128 1.35906 15.1337 0.877871C14.6516 0.393665 13.8678 0.393665 13.3857 0.877872L6.14756 8.14806Z"/>
</svg>
<span class="peer-disabled:text-black-500">Text</span>
</label>
<!-- Small -->
<label class="flex gap-8px text-p2 items-center cursor-pointer relative has-disabled:cursor-no-drop ">
<input type="radio"
class="flex items-center justify-center border bg-background w-16px h-16px rounded-full appearance-none relative checked:before:w-8px checked:before:h-8px checked:before:rounded-full checked:before:bg-foreground checked:before:inline-block cursor-pointer border-black-300 hover:border-foreground disabled:bg-black-50 disabled:border-black-100"
name="radio"
value="S"
id="radio-S" />
<svg width="10"
height="8"
viewBox="0 0 10 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="absolute left-[3px] hidden fill-white peer-checked:flex">
<path
d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z"/>
</svg>
<span class="peer-disabled:text-black-500">Text</span>
</label>
<label class="flex gap-8px text-p2 items-center cursor-pointer relative has-disabled:cursor-no-drop ">
<input type="radio"
class="flex items-center justify-center border bg-background w-16px h-16px rounded-full appearance-none relative checked:before:w-8px checked:before:h-8px checked:before:rounded-full checked:before:bg-foreground checked:before:inline-block cursor-pointer border-black-300 hover:border-foreground disabled:bg-black-50 disabled:border-black-100"
name="radio"
disabled
value="Disabled-S"
id="radio-Disabled-S" />
<svg width="10"
height="8"
viewBox="0 0 10 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="absolute left-[3px] hidden fill-white peer-checked:flex">
<path
d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z"/>
</svg>
<span class="peer-disabled:text-black-500">Text</span>
</label>