Components

Tailwind CSS Select Components - Madhuranjan UI

Discover a diverse collection of select input components designed with Tailwind CSS. From classic dropdowns to advanced designs featuring unique visual elements, these components are responsive, theme-aware, and perfect for modern web applications.

This selection of Tailwind CSS select components offers a wide range of options to suit various design needs. Whether you need a simple default select, a minimalist bottom border variant, or a more sophisticated option with gradient borders and different sizes, our examples provide intuitive, visually engaging solutions that enhance user experience and improve form functionality.

Default Select

A classic select dropdown component with standard styling, perfect for most forms and applications.

1  <div class="max-w-xs mx-auto p-4">
2            <label for="basic-select" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-100">
3                Select an option
4            </label>
5            <select
6                id="basic-select"
7                name="basic-select"
8                class="block w-full rounded-md border border-gray-300 dark:border-gray-600
9           bg-white dark:bg-gray-800
10           py-2 px-3 text-gray-700 dark:text-gray-200

Bottom Border Select

A sleek select component featuring only a bottom border for a minimalist aesthetic.

Select one option from the dropdown

1<div class="mx-auto max-w-xs p-4 bg-white dark:bg-gray-900">
2  <div class="relative z-0">
3    <select
4      id="underline-select"
5      name="underline-select"
6      class="peer block w-full appearance-none border-0 border-b-2 border-gray-300 dark:border-gray-600 bg-transparent px-0 pt-5 pb-1 text-gray-900 dark:text-gray-100 transition-colors duration-200 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-0 focus:outline-none"
7      required
8    >
9      <option value="" selected disabled>Select Options</option>
10      <option value="option1" class="dark:bg-gray-800">Option 1</option>

Size Select

A versatile select component available in multiple sizes to fit various design requirements.

1<div class="space-y-6 max-w-md mx-auto p-4">
2  <!-- Small Size -->
3  <div>
4    <label for="small-select" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
5      Small Select
6    </label>
7    <select
8      id="small-select"
9      name="small-select"
10      class="block w-full bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md py-1 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-500 transition"

Color Select

A colorful select dropdown that adjusts text colors based on the selected option, enhancing visual appeal.

1<div class="max-w-xs mx-auto p-4">
2  <label for="colorSelect" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
3    Select a Color
4  </label>
5  <div class="relative">
6    <select
7      id="colorSelect"
8      name="color"
9      class="block appearance-none w-full bg-white dark:bg-gray-800 border border-gray-300 text-gray-700 dark:text-gray-100 py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:border-indigo-500"
10    >

Gradient Border Select

An advanced select component with a modern gradient border, offering a contemporary and engaging user interface.

1<div class="max-w-xs mx-auto p-4">
2  <label for="frameworkSelect" class="block text-sm font-medium text-gray-300 mb-2">
3    Pick a Framework
4  </label>
5  <div class="relative">
6    <!-- The thick border is set with border-2 (you could use border-4 for an even thicker border) -->
7    <select
8      id="frameworkSelect"
9      name="framework"
10      class="block w-full bg-gray-800 text-gray-100 border-2 border-blue-400 rounded px-3 py-2 focus:outline-none focus:border-blue-500 appearance-none"

Disabled Select

A select component rendered in a disabled state, clearly indicating that user interaction is not permitted.

1<div class="mx-auto max-w-xs p-4">
2  <label for="disabledSelect" class="mb-2 block text-sm font-medium text-gray-300"> Disabled Select </label>
3  <div class="relative">
4    <select id="disabledSelect" name="framework" disabled class="block w-full appearance-none rounded border-2 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-700 disabled:text-gray-400">
5      <option disabled selected>Disabled Select</option>
6      <option value="react">React</option>
7      <option value="vue">Vue</option>
8      <option value="angular">Angular</option>
9      <option value="svelte">Svelte</option>
10    </select>
TextareaCheckbox