Components
Select
<div class="mx-auto max-w-xs">
<select
id="example1"
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
>
<option value="">Option01</option>
<option value="">Option02</option>
<option value="">Option03</option>
</select>
</div>
<div class="mx-auto max-w-xs">
<label for="example2" class="mb-1 block text-sm font-medium text-gray-700">Language</label>
<select
id="example2"
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
>
<option value="">English</option>
<option value="">Japanese</option>
<option value="">Chinese</option>
</select>
</div>
<div class="mx-auto max-w-xs">
<label for="example3" class="mb-1 block text-sm font-medium text-gray-700 after:text-red-500 after:content-['*']"
>Language</label
>
<select
id="example3"
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
>
<option value="">English</option>
<option value="">Japanese</option>
<option value="">Chinese</option>
</select>
<p class="tex-sm mt-1 text-gray-500">This is a help message.</p>
</div>
<div class="mx-auto max-w-xs">
<label for="example4" class="mb-1 block text-sm font-medium text-gray-700 after:text-red-500 after:content-['*']"
>Language</label
>
<select
id="example4"
class="mt-1 block w-full rounded-md border-red-300 shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
>
<option value="">English</option>
<option value="">Japanese</option>
<option value="">Chinese</option>
</select>
<p class="tex-sm mt-1 text-red-500">This is a error message.</p>
</div>
<div class="mx-auto max-w-xs">
<select
id="example5"
disabled
class="block w-full rounded-md border-gray-300 text-gray-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
>
<option value="">Option01</option>
<option value="">Option02</option>
<option value="">Option03</option>
</select>
</div>
<div class="mx-auto max-w-xs">
<label for="example6" class="mb-1 block text-sm font-medium text-gray-700 after:text-red-500 after:content-['*']"
>Language</label
>
<div class="relative">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center px-2.5">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-5 w-5 text-gray-500"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M10.5 21l5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 016-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 01-3.827-5.802"
/>
</svg>
</div>
<select
id="example6"
class="block w-full rounded-md border-gray-300 pl-10 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
>
<option value="">Select language</option>
<option value="">English</option>
<option value="">Japanese</option>
<option value="">Chinese</option>
</select>
</div>
</div>
<div class="mx-auto max-w-xs space-y-5">
<select
id="example7"
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
>
<option value="">Default</option>
<option value="">Option01</option>
<option value="">Option02</option>
<option value="">Option03</option>
</select>
<select
id="example8"
class="block w-full border-0 border-b-2 border-gray-200 focus:border-primary-500 focus:ring-0 disabled:cursor-not-allowed"
>
<option value="">Underline</option>
<option value="">Option01</option>
<option value="">Option02</option>
<option value="">Option03</option>
</select>
<select
id="example9"
class="block w-full rounded-md border-transparent bg-gray-100 focus:border-primary-300 focus:bg-white focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
>
<option value="">Fill</option>
<option value="">Option01</option>
<option value="">Option02</option>
<option value="">Option03</option>
</select>
</div>
<div class="mx-auto max-w-xs space-y-5">
<select
id="example10"
class="block w-full rounded-md border-gray-300 text-xs shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
>
<option value="">Small</option>
<option value="">Option01</option>
<option value="">Option02</option>
<option value="">Option03</option>
</select>
<select
id="example11"
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
>
<option value="">Normal</option>
<option value="">Option01</option>
<option value="">Option02</option>
<option value="">Option03</option>
</select>
<select
id="example12"
class="block w-full rounded-md border-gray-300 py-3 text-xl shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
>
<option value="">Large</option>
<option value="">Option01</option>
<option value="">Option02</option>
<option value="">Option03</option>
</select>
</div>