Skip to main content
USWDS + Tailwind

Checkbox

Checkboxes allow users to select one or more options from a list.

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
Select any historical figure
HTML 
<form class="max-w-xs">
  <fieldset>
    <legend class="leading-snug max-w-56 mb-3">Select any historical figure</legend>
    <div class="space-y-2">
      <label
        for="item-1"
        class="flex"
      >
        <input
          id="item-1"
          type="checkbox"
          value="Sojourner Truth"
          class="sr-only peer"
        >
        <div
          class="flex items-center justify-center top-0.5 relative shrink-0 cursor-pointer text-transparent peer-checked:text-white border-none size-5 rounded-xs ring-2 ring-offset-0 ring-gray-90 peer-focus:ring-2 peer-focus:ring-offset-0 peer-focus:ring-gray-90 peer-focus:outline-4 peer-focus:outline-offset-4 peer-focus:outline-blue-40v peer-disabled:ring-gray-50 peer-disabled:cursor-not-allowed peer-checked:ring-blue-60v peer-checked:bg-blue-60v peer-disabled:peer-checked:bg-gray-50 peer-focus:peer-checked:ring-blue-60v"
        >
          <svg class="size-3" xmlns="http://www.w3.org/2000/svg" width="65" height="50" viewBox="0 0 65 50"><path fill="currentColor" fill-rule="evenodd" d="M63.268 7.063l-5.616-5.61C56.882.685 55.946.3 54.845.3s-2.038.385-2.808 1.155L24.951 28.552 12.81 16.385c-.77-.77-1.707-1.155-2.808-1.155-1.1 0-2.037.385-2.807 1.154l-5.616 5.61C.81 22.764.425 23.7.425 24.8s.385 2.035 1.155 2.805l14.947 14.93 5.616 5.61c.77.77 1.706 1.154 2.807 1.154s2.038-.384 2.808-1.154l5.616-5.61 29.894-29.86c.77-.77 1.157-1.707 1.157-2.805 0-1.101-.385-2.036-1.156-2.805l-.001-.002z"/></svg>
        </div>
        <div class="pl-3 cursor-pointer block peer-disabled:text-gray-60 peer-disabled:cursor-not-allowed">Sojourner
          Truth</div>
      </label>
      <label
        for="item-2"
        class="flex"
      >
        <input
          id="item-2"
          type="checkbox"
          value="Frederick Douglass"
          class="sr-only peer"
        >
        <div
          class="flex items-center justify-center top-0.5 relative shrink-0 cursor-pointer text-transparent peer-checked:text-white border-none size-5 rounded-xs ring-2 ring-offset-0 ring-gray-90 peer-focus:ring-2 peer-focus:ring-offset-0 peer-focus:ring-gray-90 peer-focus:outline-4 peer-focus:outline-offset-4 peer-focus:outline-blue-40v peer-disabled:ring-gray-50 peer-disabled:cursor-not-allowed peer-checked:ring-blue-60v peer-checked:bg-blue-60v peer-disabled:peer-checked:bg-gray-50 peer-focus:peer-checked:ring-blue-60v"
        >
          <svg class="size-3" xmlns="http://www.w3.org/2000/svg" width="65" height="50" viewBox="0 0 65 50"><path fill="currentColor" fill-rule="evenodd" d="M63.268 7.063l-5.616-5.61C56.882.685 55.946.3 54.845.3s-2.038.385-2.808 1.155L24.951 28.552 12.81 16.385c-.77-.77-1.707-1.155-2.808-1.155-1.1 0-2.037.385-2.807 1.154l-5.616 5.61C.81 22.764.425 23.7.425 24.8s.385 2.035 1.155 2.805l14.947 14.93 5.616 5.61c.77.77 1.706 1.154 2.807 1.154s2.038-.384 2.808-1.154l5.616-5.61 29.894-29.86c.77-.77 1.157-1.707 1.157-2.805 0-1.101-.385-2.036-1.156-2.805l-.001-.002z"/></svg>
        </div>
        <div class="pl-3 cursor-pointer block peer-disabled:text-gray-60 peer-disabled:cursor-not-allowed">Frederick
          Douglass</div>
      </label>
      <label
        for="item-3"
        class="flex"
      >
        <input
          id="item-3"
          type="checkbox"
          value="Booker T. Washington"
          class="sr-only peer"
        >
        <div
          class="flex items-center justify-center top-0.5 relative shrink-0 cursor-pointer text-transparent peer-checked:text-white border-none size-5 rounded-xs ring-2 ring-offset-0 ring-gray-90 peer-focus:ring-2 peer-focus:ring-offset-0 peer-focus:ring-gray-90 peer-focus:outline-4 peer-focus:outline-offset-4 peer-focus:outline-blue-40v peer-disabled:ring-gray-50 peer-disabled:cursor-not-allowed peer-checked:ring-blue-60v peer-checked:bg-blue-60v peer-disabled:peer-checked:bg-gray-50 peer-focus:peer-checked:ring-blue-60v"
        >
          <svg class="size-3" xmlns="http://www.w3.org/2000/svg" width="65" height="50" viewBox="0 0 65 50"><path fill="currentColor" fill-rule="evenodd" d="M63.268 7.063l-5.616-5.61C56.882.685 55.946.3 54.845.3s-2.038.385-2.808 1.155L24.951 28.552 12.81 16.385c-.77-.77-1.707-1.155-2.808-1.155-1.1 0-2.037.385-2.807 1.154l-5.616 5.61C.81 22.764.425 23.7.425 24.8s.385 2.035 1.155 2.805l14.947 14.93 5.616 5.61c.77.77 1.706 1.154 2.807 1.154s2.038-.384 2.808-1.154l5.616-5.61 29.894-29.86c.77-.77 1.157-1.707 1.157-2.805 0-1.101-.385-2.036-1.156-2.805l-.001-.002z"/></svg>
        </div>
        <div class="pl-3 cursor-pointer block peer-disabled:text-gray-60 peer-disabled:cursor-not-allowed">Booker T.
          Washington</div>
      </label>
      <label
        for="item-4"
        class="flex"
      >
        <input
          disabled=""
          id="item-4"
          type="checkbox"
          value="George Washington Carver"
          class="sr-only peer"
        >
        <div
          class="flex items-center justify-center top-0.5 relative shrink-0 cursor-pointer text-transparent peer-checked:text-white border-none size-5 rounded-xs ring-2 ring-offset-0 ring-gray-90 peer-focus:ring-2 peer-focus:ring-offset-0 peer-focus:ring-gray-90 peer-focus:outline-4 peer-focus:outline-offset-4 peer-focus:outline-blue-40v peer-disabled:ring-gray-50 peer-disabled:cursor-not-allowed peer-checked:ring-blue-60v peer-checked:bg-blue-60v peer-disabled:peer-checked:bg-gray-50 peer-focus:peer-checked:ring-blue-60v"
        >
          <svg class="size-3" xmlns="http://www.w3.org/2000/svg" width="65" height="50" viewBox="0 0 65 50"><path fill="currentColor" fill-rule="evenodd" d="M63.268 7.063l-5.616-5.61C56.882.685 55.946.3 54.845.3s-2.038.385-2.808 1.155L24.951 28.552 12.81 16.385c-.77-.77-1.707-1.155-2.808-1.155-1.1 0-2.037.385-2.807 1.154l-5.616 5.61C.81 22.764.425 23.7.425 24.8s.385 2.035 1.155 2.805l14.947 14.93 5.616 5.61c.77.77 1.706 1.154 2.807 1.154s2.038-.384 2.808-1.154l5.616-5.61 29.894-29.86c.77-.77 1.157-1.707 1.157-2.805 0-1.101-.385-2.036-1.156-2.805l-.001-.002z"/></svg>
        </div>
        <div class="pl-3 cursor-pointer block peer-disabled:text-gray-60 peer-disabled:cursor-not-allowed">George
          Washington Carver</div>
      </label>
    </div>
  </fieldset>
</form>

Tiled

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
Select any historical figure
HTML 
<form class="max-w-xs">
  <fieldset>
    <legend class="leading-snug max-w-56 mb-3">Select any historical figure</legend>
    <div class="space-y-2">
      <label
        for="item-5"
        class="flex relative z-0 px-3 py-4"
      >
        <input
          id="item-5"
          type="checkbox"
          value="Sojourner Truth"
          class="sr-only peer"
        >
        <div
          class="flex items-center justify-center top-0.5 relative shrink-0 cursor-pointer text-transparent peer-checked:text-white border-none size-5 rounded-xs ring-2 ring-offset-0 ring-gray-90 peer-focus:ring-2 peer-focus:ring-offset-0 peer-focus:ring-gray-90 peer-focus:outline-4 peer-focus:outline-offset-4 peer-focus:outline-blue-40v peer-disabled:ring-gray-50 peer-disabled:cursor-not-allowed peer-checked:ring-blue-60v peer-checked:bg-blue-60v peer-disabled:peer-checked:bg-gray-50 peer-focus:peer-checked:ring-blue-60v"
        >
          <svg class="size-3" xmlns="http://www.w3.org/2000/svg" width="65" height="50" viewBox="0 0 65 50"><path fill="currentColor" fill-rule="evenodd" d="M63.268 7.063l-5.616-5.61C56.882.685 55.946.3 54.845.3s-2.038.385-2.808 1.155L24.951 28.552 12.81 16.385c-.77-.77-1.707-1.155-2.808-1.155-1.1 0-2.037.385-2.807 1.154l-5.616 5.61C.81 22.764.425 23.7.425 24.8s.385 2.035 1.155 2.805l14.947 14.93 5.616 5.61c.77.77 1.706 1.154 2.807 1.154s2.038-.384 2.808-1.154l5.616-5.61 29.894-29.86c.77-.77 1.157-1.707 1.157-2.805 0-1.101-.385-2.036-1.156-2.805l-.001-.002z"/></svg>
        </div>
        <div
          class="pl-3 cursor-pointer block peer-disabled:text-gray-60 peer-disabled:cursor-not-allowed before:absolute before:-z-10 before:inset-0 before:bg-white before:border-2 before:border-gray-20 before:rounded-s-smm peer-checked:before:border-blue-60v peer-checked:before:bg-blue-60v/10 peer-disabled:before:border-gray-10 peer-disabled:before:bg-white"
        >Sojourner Truth <span class="block mt-1 text-sm">This is optional text that can be used to describe the label
            in more detail.</span>
        </div>
      </label>
      <label
        for="item-6"
        class="flex relative z-0 px-3 py-4"
      >
        <input
          id="item-6"
          type="checkbox"
          value="Frederick Douglass"
          class="sr-only peer"
        >
        <div
          class="flex items-center justify-center top-0.5 relative shrink-0 cursor-pointer text-transparent peer-checked:text-white border-none size-5 rounded-xs ring-2 ring-offset-0 ring-gray-90 peer-focus:ring-2 peer-focus:ring-offset-0 peer-focus:ring-gray-90 peer-focus:outline-4 peer-focus:outline-offset-4 peer-focus:outline-blue-40v peer-disabled:ring-gray-50 peer-disabled:cursor-not-allowed peer-checked:ring-blue-60v peer-checked:bg-blue-60v peer-disabled:peer-checked:bg-gray-50 peer-focus:peer-checked:ring-blue-60v"
        >
          <svg class="size-3" xmlns="http://www.w3.org/2000/svg" width="65" height="50" viewBox="0 0 65 50"><path fill="currentColor" fill-rule="evenodd" d="M63.268 7.063l-5.616-5.61C56.882.685 55.946.3 54.845.3s-2.038.385-2.808 1.155L24.951 28.552 12.81 16.385c-.77-.77-1.707-1.155-2.808-1.155-1.1 0-2.037.385-2.807 1.154l-5.616 5.61C.81 22.764.425 23.7.425 24.8s.385 2.035 1.155 2.805l14.947 14.93 5.616 5.61c.77.77 1.706 1.154 2.807 1.154s2.038-.384 2.808-1.154l5.616-5.61 29.894-29.86c.77-.77 1.157-1.707 1.157-2.805 0-1.101-.385-2.036-1.156-2.805l-.001-.002z"/></svg>
        </div>
        <div
          class="pl-3 cursor-pointer block peer-disabled:text-gray-60 peer-disabled:cursor-not-allowed before:absolute before:-z-10 before:inset-0 before:bg-white before:border-2 before:border-gray-20 before:rounded-s-smm peer-checked:before:border-blue-60v peer-checked:before:bg-blue-60v/10 peer-disabled:before:border-gray-10 peer-disabled:before:bg-white"
        >Frederick Douglass </div>
      </label>
      <label
        for="item-7"
        class="flex relative z-0 px-3 py-4"
      >
        <input
          id="item-7"
          type="checkbox"
          value="Booker T. Washington"
          class="sr-only peer"
        >
        <div
          class="flex items-center justify-center top-0.5 relative shrink-0 cursor-pointer text-transparent peer-checked:text-white border-none size-5 rounded-xs ring-2 ring-offset-0 ring-gray-90 peer-focus:ring-2 peer-focus:ring-offset-0 peer-focus:ring-gray-90 peer-focus:outline-4 peer-focus:outline-offset-4 peer-focus:outline-blue-40v peer-disabled:ring-gray-50 peer-disabled:cursor-not-allowed peer-checked:ring-blue-60v peer-checked:bg-blue-60v peer-disabled:peer-checked:bg-gray-50 peer-focus:peer-checked:ring-blue-60v"
        >
          <svg class="size-3" xmlns="http://www.w3.org/2000/svg" width="65" height="50" viewBox="0 0 65 50"><path fill="currentColor" fill-rule="evenodd" d="M63.268 7.063l-5.616-5.61C56.882.685 55.946.3 54.845.3s-2.038.385-2.808 1.155L24.951 28.552 12.81 16.385c-.77-.77-1.707-1.155-2.808-1.155-1.1 0-2.037.385-2.807 1.154l-5.616 5.61C.81 22.764.425 23.7.425 24.8s.385 2.035 1.155 2.805l14.947 14.93 5.616 5.61c.77.77 1.706 1.154 2.807 1.154s2.038-.384 2.808-1.154l5.616-5.61 29.894-29.86c.77-.77 1.157-1.707 1.157-2.805 0-1.101-.385-2.036-1.156-2.805l-.001-.002z"/></svg>
        </div>
        <div
          class="pl-3 cursor-pointer block peer-disabled:text-gray-60 peer-disabled:cursor-not-allowed before:absolute before:-z-10 before:inset-0 before:bg-white before:border-2 before:border-gray-20 before:rounded-s-smm peer-checked:before:border-blue-60v peer-checked:before:bg-blue-60v/10 peer-disabled:before:border-gray-10 peer-disabled:before:bg-white"
        >Booker T. Washington </div>
      </label>
      <label
        for="item-8"
        class="flex relative z-0 px-3 py-4"
      >
        <input
          disabled=""
          id="item-8"
          type="checkbox"
          value="George Washington Carver"
          class="sr-only peer"
        >
        <div
          class="flex items-center justify-center top-0.5 relative shrink-0 cursor-pointer text-transparent peer-checked:text-white border-none size-5 rounded-xs ring-2 ring-offset-0 ring-gray-90 peer-focus:ring-2 peer-focus:ring-offset-0 peer-focus:ring-gray-90 peer-focus:outline-4 peer-focus:outline-offset-4 peer-focus:outline-blue-40v peer-disabled:ring-gray-50 peer-disabled:cursor-not-allowed peer-checked:ring-blue-60v peer-checked:bg-blue-60v peer-disabled:peer-checked:bg-gray-50 peer-focus:peer-checked:ring-blue-60v"
        >
          <svg class="size-3" xmlns="http://www.w3.org/2000/svg" width="65" height="50" viewBox="0 0 65 50"><path fill="currentColor" fill-rule="evenodd" d="M63.268 7.063l-5.616-5.61C56.882.685 55.946.3 54.845.3s-2.038.385-2.808 1.155L24.951 28.552 12.81 16.385c-.77-.77-1.707-1.155-2.808-1.155-1.1 0-2.037.385-2.807 1.154l-5.616 5.61C.81 22.764.425 23.7.425 24.8s.385 2.035 1.155 2.805l14.947 14.93 5.616 5.61c.77.77 1.706 1.154 2.807 1.154s2.038-.384 2.808-1.154l5.616-5.61 29.894-29.86c.77-.77 1.157-1.707 1.157-2.805 0-1.101-.385-2.036-1.156-2.805l-.001-.002z"/></svg>
        </div>
        <div
          class="pl-3 cursor-pointer block peer-disabled:text-gray-60 peer-disabled:cursor-not-allowed before:absolute before:-z-10 before:inset-0 before:bg-white before:border-2 before:border-gray-20 before:rounded-s-smm peer-checked:before:border-blue-60v peer-checked:before:bg-blue-60v/10 peer-disabled:before:border-gray-10 peer-disabled:before:bg-white"
        >George Washington Carver </div>
      </label>
    </div>
  </fieldset>
</form>