1. Components
  2. Input

Basic Forms

Tailwind CSS Input

A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.

Attention needed

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

Basic usage

Placeholder

Basic input example with placeholder.

Label

Basic input example with label.

Hidden label

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

Basic

Basic input example.

Types

Gray input

Example of a gray input style variant.

Underline input

A simple underline style input field example.

Floating label

A placeholder is required on each <input> as our method uses the :placeholder-shown pseudo-element. Also note that the <input> must come first so we can utilize a sibling selector (e.g., ~).

When there’s a value already defined, <label>s will automatically adjust to their floated position.

Sizes

Inputs stacked small to large sizes.

Shape

Pilled input

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

Readonly

Add the readonly boolean attribute on an input to prevent modification of the input’s value.

Disabled

Add the disabled boolean attribute on an input to remove pointer events, and prevent focusing.

Helper text

Example of an input field with helper text for additional guidance.

We'll never share your details.

Inline helper text

Example of an input field with inline helper text for additional guidance.

We'll never share your details.

Corner hint

Basic input example with a corner hint label.

Optional

Validation states

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

Please enter a valid email address.

Looks good!