Skip to content

Inputs

Text fields, floating labels and input groups.

4 component(s)

OTP Code Input Boxes – Tailwind CSS inputs preview

OTP Code Input Boxes

Six-digit Tailwind CSS OTP verification input with auto-advance, paste support, backspace navigation, resend timer and simulated check.

Tailwind CSS Inputs
Floating Label Inputs – Bootstrap 5 inputs preview

Floating Label Inputs

Bootstrap 5 floating label inputs for text, email, select and textarea, styled as filled fields with validation, read-only and disabled states.

Bootstrap 5 Inputs
Password Strength Meter – Bootstrap 5 inputs preview

Password Strength Meter

Bootstrap 5 password input with show/hide toggle, four-step strength meter, live requirements checklist and confirmation match check.

Bootstrap 5 Inputs
Inputs with Icons and Add-ons – Tailwind CSS inputs preview

Inputs with Icons and Add-ons

Tailwind CSS input group examples with leading icons, text prefixes and suffixes, a currency select, password toggle, clear button and helper text.

Tailwind CSS Inputs

What is an input component?

Inputs are the text fields users type into: single-line text, email, password, number, phone and multi-line textareas. This category covers styled inputs, floating labels, input groups with icons, prefixes and buttons, inputs with helper text and validation states, and character counters. Inputs are the building blocks of every form, so small improvements here pay off everywhere.

When to use each style

  • Standard label above input for most forms; it is the clearest pattern.
  • Floating labels when vertical space is tight, as long as the label stays visible.
  • Input groups for units, currencies, URLs or an attached action like "Copy" or "Search".
  • Textareas for open-ended answers, with a counter if there is a limit.

Best practices

  • Every input needs a programmatically associated <label> using for and id.
  • Use the correct type and inputmode so mobile devices show the right keyboard, and set autocomplete values for personal data.
  • Do not use the placeholder as the only label; use it for example formats at most.
  • Show helper text and errors below the field and connect them with aria-describedby; set aria-invalid="true" on invalid fields.
  • Keep focus styles visible with good contrast, for example a focus ring rather than a subtle border colour change.
  • Make inputs at least 44 pixels tall on touch devices and use a font size of 16 pixels or more to avoid zoom on iOS.
  • Icons inside inputs are decorative; hide them with aria-hidden="true".

Framework versions

The input examples on this page include floating label inputs, input groups, icon inputs, validation states and textareas, each with a live preview and code tabs. Bootstrap 6 versions use theme-* colour roles for focus rings and validation feedback. Bootstrap 5 versions build on .form-control, .form-floating and .input-group, Tailwind CSS versions use border, ring and padding utilities, and pure CSS versions use plain selectors such as :focus-visible and :user-invalid. Filter by framework, copy the code and match it to your form design.