Checkbox & radio

Toggle control for binary or multiple selections. Exclusive option selector from a set.

Themer

Checkbox

Text Text Text Text

<!-- Default -->
<label class="flex gap-8px text-p2 items-center cursor-pointer relative has-disabled:cursor-no-drop">
  <input type="checkbox"
    class="peer w-24px h-24px rounded-4px appearance-none bg-white border border-black-300 cursor-pointer hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800 disabled:bg-black-50 disabled:border-black-100" />
  <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="checkbox"
        class="peer w-24px h-24px rounded-4px appearance-none bg-white border border-black-300 cursor-pointer hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800 disabled:bg-black-50 disabled:border-black-100"
        disabled />
    <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-p3 items-center cursor-pointer relative has-disabled:cursor-no-drop">
    <input type="checkbox"
        class="peer w-16px h-16px rounded-4px appearance-none bg-white border border-black-300 cursor-pointer hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800 disabled:bg-black-50 disabled:border-black-100" />
    <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-p3 items-center cursor-pointer relative has-disabled:cursor-no-drop">
    <input type="checkbox"
        class="peer w-16px h-16px rounded-4px appearance-none bg-white border border-black-300 cursor-pointer hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800 disabled:bg-black-50 disabled:border-black-100"
        disabled />
    <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>

Radio

Text Text Text Text

<!-- Default -->
<label class="flex gap-8px text-p2 items-center cursor-pointer has-disabled:cursor-no-drop">
  <input type="radio"
    class="flex items-center justify-center w-24px h-24px rounded-full appearance-none cursor-pointer bg-white border border-black-300 relative hover:border-black checked:before:w-12px checked:before:h-12px checked:before:rounded-full checked:before:bg-black checked:before:inline-block disabled:bg-black-50 disabled:border-black-100"
    name="docs" />
  Text
</label>
<label class="flex gap-8px text-p2 items-center cursor-pointer has-disabled:cursor-no-drop">
  <input type="radio"
    class="flex items-center justify-center w-24px h-24px rounded-full appearance-none cursor-pointer bg-white border border-black-300 relative hover:border-black checked:before:w-12px checked:before:h-12px checked:before:rounded-full checked:before:bg-black checked:before:inline-block disabled:bg-black-50 disabled:border-black-100"
    name="docs"
    disabled />
  Text
</label>

<!-- Small -->
<label class="flex gap-8px text-p3 items-center cursor-pointer has-disabled:cursor-no-drop">
  <input type="radio"
    class="flex items-center justify-center w-16px h-16px rounded-full appearance-none cursor-pointer bg-white border border-black-300 relative hover:border-black checked:before:w-8px checked:before:h-8px checked:before:rounded-full checked:before:bg-black checked:before:inline-block disabled:bg-black-50 disabled:border-black-100"
    name="docs" />
  Text
</label>
<label class="flex gap-8px text-p3 items-center cursor-pointer has-disabled:cursor-no-drop">
  <input type="radio"
    class="flex items-center justify-center w-16px h-16px rounded-full appearance-none cursor-pointer bg-white border border-black-300 relative hover:border-black checked:before:w-8px checked:before:h-8px checked:before:rounded-full checked:before:bg-black checked:before:inline-block disabled:bg-black-50 disabled:border-black-100"
    name="docs"
    disabled />
  Text
</label>

On this page

Checkbox & radio
Checkbox
Radio