Select – Design Portal

The select box allows you to offer visitors a dropdown selection of options.

Demo

Label Name:

<div class="mb-4">
  <label for="contactStuff" class="inline-block mb-2">Label Name:</label>
  <div class="relative">
    <select id="contactStuff" name="contactType" class="appearance-none w-full border border-gray rounded-md focus:ring-royal-blue px-4 py-3 placeholder-gray-dark text-gray-darkest transition duration-150 ease-in-out sm:leading-5 required" required="">
      <option value="">Select Options</option>
      <option value="">Option 1</option>
      <option value="">Option 2</option>
      <option value="">Option 3</option>
    </select>          
    <div class="pointer-events-none absolute right-0 inset-y-0 flex items-center px-4 text-grey-darker">
      <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path></svg>
    </div>
  </div>
  <div class="color-red-error mt-1 text-sm hidden">Error message</div>
</div>

/* HSW components use Tailwind! 
Individual utility classes are added to the HTML. */

No JS! 😀

Anatomy

Select
Select Label
Select Option
Select Icon/Chevron