Select
Let people choose one option from a menu with a select control. See default and disabled examples.
Examples
Default
Breakpoints
Mobile
320pxMobile Lg
480pxTablet
640pxDesktop
1024pxHTML
<div class="max-w-sm"> <label for="select-default">Dropdown label</label> <div class="mt-2 relative flex items-center"> <select id="select-default" class="peer opacity-100 p-2 pr-8 text-gray-90 w-full appearance-none border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4 disabled:text-gray-70 disabled:cursor-not-allowed disabled:bg-gray-20" > <option value="" selected disabled>- Select -</option> <option value="value1">Option A</option> <option value="value2">Option B</option> <option value="value3">Option C</option> </select> <div aria-hidden="true" class="select-none pointer-events-none h-full absolute right-0 whitespace-nowrap px-2 flex items-center text-gray-90 peer-disabled:text-gray-70"> <div class="icon-[material-symbols--unfold-more] size-5"></div> </div> </div></div>Disabled
Breakpoints
Mobile
320pxMobile Lg
480pxTablet
640pxDesktop
1024pxHTML
<div class="max-w-sm"> <label for="select-disabled">Dropdown label</label> <div class="mt-2 relative flex items-center"> <select disabled id="select-disabled" class="peer opacity-100 p-2 pr-8 text-gray-90 w-full appearance-none border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4 disabled:text-gray-70 disabled:cursor-not-allowed disabled:bg-gray-20 " > <option value="" selected disabled>- Select -</option> <option value="value1">Option A</option> <option value="value2">Option B</option> <option value="value3">Option C</option> </select> <div aria-hidden="true" class="select-none pointer-events-none h-full absolute right-0 whitespace-nowrap px-2 flex items-center text-gray-90 peer-disabled:text-gray-70"> <div class="icon-[material-symbols--unfold-more] size-5"></div> </div> </div></div>