Form Select

The form-select utility class is a flexible and customizable Tailwind CSS utility to style select fields.

Basic Usage

Select FieldOption AOption BOption C

DisabledOption AOption BOption C

ReadonlyOption AOption BOption C

Readonly (Disabled)Option AOption BOption C

Show Code

<div>
    <label class="form-label">Select Field</label>
    <select class="form-select">
        <option>Option A</option>
        <option>Option B</option>
        <option>Option C</option>
    </select>
</div>
<div>
    <label class="form-label">Disabled</label>
    <select class="form-select" disabled>
        <option>Option A</option>
        <option selected>Option B</option>
        <option>Option C</option>
    </select>
</div>
<div>
    <label class="form-label">Readonly</label>
    <select class="form-select" readonly>
        <option disabled>Option A</option>
        <option disabled selected>Option B</option>
        <option disabled>Option C</option>
    </select>
</div>
<div>
    <label class="form-label">Readonly (Disabled)</label>
    <select class="form-select" readonly disabled>
        <option disabled>Option A</option>
        <option selected>Option B</option>
        <option disabled>Option C</option>
    </select>
</div>

Plaintext

PlaintextOption AOption BOption C

Plaintext (Readonly)Option AOption BOption C

Plaintext (Disabled & Readonly)Option AOption BOption C

Show Code

<div>
    <label class="form-label">Plaintext</label>
    <select class="form-select form-select-plaintext">
        <option>Option A</option>
        <option selected>Option B</option>
        <option>Option C</option>
    </select>
</div>
<div>
    <label class="form-label">Plaintext (Readonly)</label>
    <select class="form-select form-select-plaintext" readonly>
        <option disabled>Option A</option>
        <option disabled selected>Option B</option>
        <option disabled>Option C</option>
    </select>
</div>
<div>
    <label class="form-label">Plaintext (Disabled & Readonly)</label>
    <select class="form-select form-select-plaintext" disabled readonly>
        <option disabled>Option A</option>
        <option disabled selected>Option B</option>
        <option disabled>Option C</option>
    </select>
</div>

Sizes

Customize the size of the select dropdown using a predetermined size, tailwind's numeric sizing classes, or an arbitrary CSS length unit.

Predetermined Sizes

The size can be customized using predetermined size classes: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl. Use the syntax: form-select-[size].

form-select-xsform-select-smform-select-mdform-select-lgform-select-xlform-select-2xlform-select-3xlform-select-4xlform-select-5xl

Show Code

<select class="form-select form-select-xs">
    <option selected>form-select-xs</option>
</select>
<select class="form-select form-select-sm">
    <option selected>form-select-sm</option>
</select>
<select class="form-select form-select-md">
    <option selected>form-select-md</option>
</select>
<select class="form-select form-select-lg">
    <option selected>form-select-lg</option>
</select>
<select class="form-select form-select-xl">
    <option selected>form-select-xl</option>
</select>
<select class="form-select form-select-2xl">
    <option selected>form-select-2xl</option>
</select>
<select class="form-select form-select-3xl">
    <option selected>form-select-3xl</option>
</select>
<select class="form-select form-select-4xl">
    <option selected>form-select-4xl</option>
</select>
<select class="form-select form-select-5xl">
    <option selected>form-select-5xl</option>
</select>

Tailwind Sizes

For more granular control over select sizes, use Tailwind's numeric sizing scale classes: form-select-1 - form-select-96.

form-select-4form-select-5form-select-6

Show Code

<select class="form-select form-select-4">
    <option selected>form-select-4</option>
</select>
<select class="form-select form-select-5">
    <option selected>form-select-5</option>
</select>
<select class="form-select form-select-6">
    <option selected>form-select-6</option>
</select>

Arbitrary Sizes

For precise sizing, specify exact pixel values using the syntax form-select-[Npx] or any other CSS length units (rem, em, mm, etc.).

form-select-[16px]form-select-[1.5rem]

Show Code

<select class="form-select form-select-[16px]">
    <option selected>form-select-[16px]</option>
</select>
<select class="form-select form-select-[1.5rem]">
    <option selected>form-select-[1.5rem]</option>
</select>

Validation

Validation classes provides error-checking styling for the form-select element. The is-invalid and is-valid classes provide the styling for invalid and valid elements, respectively.

Invalid Field

Option AOption BOption C

This is an inline error.

This is an inline error.

This is an inline error.

Valid Field

Option AOption BOption C

This is an inline success message.

This is an inline success message.

This is an inline success message.

Show Code

<div>
    <label class="flex-shrink-0 invalid-feedback">Invalid Field</label>
    <div>
        <select class="form-select" invalid>
            <option>Option A</option>
            <option selected>Option B</option>
            <option>Option C</option>
        </select>
        <div class="invalid-feedback">This is an inline error.</div>
    </div>
    <div class="invalid-feedback">This is an inline error.</div>
    <div>
        <div class="invalid-feedback">This is an inline error.</div>
    </div>
</div>
<div>
    <label class="flex-shrink-0 valid-feedback">Valid Field</label>
    <div>
        <select class="form-select" valid>
            <option>Option A</option>
            <option selected>Option B</option>
            <option>Option C</option>
        </select>
        <div class="valid-feedback">This is an inline success message.</div>
    </div>
    <div class="valid-feedback">This is an inline success message.</div>
    <div>
        <div class="valid-feedback">This is an inline success message.</div>
    </div>
</div>

Custom Colors

Customize the color of a form-select element with the Tailwind color palette by using the class: form-select-[color].

123123123123

Show Code

<select class="form-select form-select-amber-500">
    <option value=""></option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select class="form-select form-select-green-500">
    <option value=""></option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select class="form-select form-select-purple-500">
    <option value=""></option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<select class="form-select form-select-neutral-500">
    <option value=""></option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

Animated

The form-select animated component combines the tailwind form-control-animated and form-select-animated classes to provide a custom animated component.

form-select123

<div class="form-control-animated">
    <label for="form-select-animated" class="form-label">form-select</label>
    <select id="form-select-animated" class="form-select">
        <option value=""></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>

Use the size classes described above to customize the size of the animated select fields.

form-select-xs123

form-select-sm123

form-select-md123

form-select-lg123

form-select-xl123

form-select-2xl123

form-select-3xl123

form-select-4xl123

form-select-5xl123

form-select-3123

form-select-4123

form-select-[1.5rem]123

Show Code

<div class="form-control-animated-xs">
    <label for="form-select-animated-xs" class="form-label">form-select-xs</label>
    <select id="form-select-animated-xs" class="form-select form-select-xs">
        <option value=""></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div class="form-control-animated-sm">
    <label for="form-select-animated-sm" class="form-label">form-select-sm</label>
    <select id="form-select-animated-sm" class="form-select form-select-sm">
        <option value=""></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div class="form-control-animated-md">
    <label for="form-select-animated-md" class="form-label">form-select-md</label>
    <select id="form-select-animated-md" class="form-select form-select-md">
        <option value=""></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div class="form-control-animated-lg">
    <label for="form-select-animated-lg" class="form-label">form-select-lg</label>
    <select id="form-select-animated-lg" class="form-select form-select-lg">
        <option value=""></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div class="form-control-animated-xl">
    <label for="form-select-animated-xl" class="form-label">form-select-xl</label>
    <select id="form-select-animated-xl" class="form-select form-select-xl">
        <option value=""></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div class="form-control-animated-2xl">
    <label for="form-select-animated-2xl" class="form-label">form-select-2xl</label>
    <select id="form-select-animated-2xl" class="form-select form-select-2xl">
        <option value=""></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div class="form-control-animated-3xl">
    <label for="form-select-animated-3xl" class="form-label">form-select-3xl</label>
    <select id="form-select-animated-3xl" class="form-select form-select-3xl">
        <option value=""></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div class="form-control-animated-4xl">
    <label for="form-select-animated-4xl" class="form-label">form-select-4xl</label>
    <select id="form-select-animated-4xl" class="form-select form-select-4xl">
        <option value=""></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div class="form-control-animated-5xl">
    <label for="form-select-animated-5xl" class="form-label">form-select-5xl</label>
    <select id="form-select-animated-5xl" class="form-select form-select-5xl">
        <option value=""></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div class="form-control-animated-3">
    <label for="form-select-animated-3" class="form-label">form-select-3</label>
    <select id="form-select-animated-3" class="form-select form-select-3">
        <option value=""></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div class="form-control-animated-4">
    <label for="form-select-animated-4" class="form-label">form-select-4</label>
    <select id="form-select-animated-4" class="form-select form-select-4">
        <option value=""></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div class="form-control-animated-[1.5rem]">
    <label for="form-select-animated-[1.5rem]" class="form-label">form-select-[1.5rem]</label>
    <select id="form-select-animated-[1.5rem]" class="form-select form-select-[1.5rem]">
        <option value=""></option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>