Tailwind CSS Input

Basic usage

Label

Basic input example with label.

Hidden label

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

Basic

Basic input example.

Types

Underline input

Underline input variant.

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

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

Basic input example with helper text.

Inline helper text

Basic input example with inline helper text.

Corner hint

Basic input example with corner-hint.

Validation states

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