1. Components
  2. Select

Basic Forms

Tailwind CSS Select

Select allows users to make a single selection or multiple selections from a list of options.

Attention needed

By default Preline UI uses Tailwind CSS Forms plugin. Don't forget to install it!

Basic usage

Example

Custom styles are limited to the <select>'s initial appearance and cannot modify the <option>s due to browser limitations.

Theme:

Types

Gray input

Gray select variant.

Theme:

Floating label

Unlike <input>s, they’ll always show the <label> in its floated state. Selects with size and multiple are not supported.

Theme:

Sizes

Selects stacked small to large sizes.

Theme:

Shape

Pilled select

Use the .rounded-full utility class to make select circular.

Theme:

Disabled

Disabled input.

Theme:

Label

Basic input example with label.

Theme:

Hidden label

<label> elements hidden using the .sr-only class

Theme:

Validation states

It provides valuable, actionable feedback to your users with HTML5 form validation.

Theme: