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.

Types

Gray input

Gray select variant.

Floating label

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

Sizes

Selects stacked small to large sizes.

Shape

Pilled select

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

Disabled

Disabled input.

Label

Basic input example with label.

Hidden label

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

Validation states

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

Please select a valid state.

Looks good!