Application toolkit - Select

Select allows users to make a single selection or multiple selections from a list of options.

Basic

Custom styles are limited to the <select>'s initial appearance and cannot modify the <option>s due to browser limitations.

Open this basic select example in new window
Copy basic select code 
<select class="py-3 px-4 pr-9 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
  <option selected>Open this select menu</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
Close basic select code

Sizes

Selects stacked small to large sizes.

Open this sizes select example in new window
Copy sizes select code 
<div class="flex flex-col gap-3">
  <select class="py-2 px-3 pr-9 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
    <option selected>Open this select menu</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>

  <select class="py-3 px-4 pr-9 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 sm:p-4">
    <option selected>Open this select menu</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>

  <select class="py-3 px-4 pr-9 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 sm:p-5">
    <option selected>Open this select menu</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</div>
Close sizes select code

Pilled select

Use the .rounded-full utility class to make select circular.

Open this pilled select example in new window
Copy pilled select code 
<select class="py-3 px-4 pr-9 block w-full border-gray-200 rounded-full text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
  <option selected>Open this select menu</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
Close pilled select code

Disabled

Disabled input.

Open this disabled select example in new window
Copy disabled select code 
<select class="opacity-70 pointer-events-none py-3 px-4 pr-9 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" disabled>
  <option selected>Open this select menu</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
Close disabled select code

Label

Basic input example with label.

Open this label select example in new window
Copy label select code 
<label for="hs-select-label" class="block text-sm font-medium mb-2 dark:text-white">Label</label>
<select id="hs-select-label" class="py-3 px-4 pr-9 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
  <option selected>Open this select menu</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
Close label select code

Hidden label

<label> elements hidden using the .sr-only class

Open this hidden label select example in new window
Copy hidden label select code 
<label for="hs-hidden-select" class="sr-only">Label</label>
<select id="hs-hidden-select" class="py-3 px-4 pr-9 block w-full border-gray-200 rounded-md text-sm focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
  <option selected>Open this select menu</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
Close hidden label select code

Validation states

It provides valuable, actionable feedback to your users with HTML5 form validation.

Open this validation states select example in new window
Copy validation states select code 
<div class="flex flex-col gap-4">
  <div>
    <label for="select-1" class="block text-sm font-medium mb-2 dark:text-white">Label</label>
    <div class="relative">
      <select id="select-1" class="py-3 px-4 pr-16 block w-full border-hs2-danger rounded-md text-sm focus:border-hs2-danger focus:ring-hs2-danger dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
        <option selected>Open this select menu</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
      <div class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-8">
        <svg class="h-4 w-4 text-hs2-danger" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
        </svg>
      </div>
    </div>
    <p class="text-sm text-hs2-danger mt-2">Please select a valid state.</p>
  </div>

  <div>
    <label for="select-2" class="block text-sm font-medium mb-2 dark:text-white">Label</label>
    <div class="relative">
      <select id="select-2" class="py-3 px-4 pr-16 block w-full border-hs2-success rounded-md text-sm focus:border-hs2-success focus:ring-hs2-success dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
        <option>Open this select menu</option>
        <option selected>1</option>
        <option>2</option>
        <option>3</option>
      </select>
      <div class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-8">
        <svg class="h-4 w-4 text-hs2-success" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M13.6091 3.41829C13.8594 3.68621 14 4.04952 14 4.42835C14 4.80718 13.8594 5.1705 13.6091 5.43841L6.93313 12.5817C6.68275 12.8495 6.3432 13 5.98916 13C5.63511 13 5.29556 12.8495 5.04518 12.5817L2.3748 9.72439C2.13159 9.45494 1.99701 9.09406 2.00005 8.71947C2.00309 8.34488 2.14351 7.98656 2.39107 7.72167C2.63862 7.45679 2.9735 7.30654 3.32359 7.30328C3.67367 7.30002 4.01094 7.44403 4.26276 7.70427L5.98916 9.55152L11.7211 3.41829C11.9715 3.15046 12.3111 3 12.6651 3C13.0191 3 13.3587 3.15046 13.6091 3.41829Z" fill="currentColor" />
        </svg>
      </div>
    </div>
    <p class="text-sm text-hs2-success mt-2">Looks good!</p>
  </div>
</div>
Close validation states select code