Tailwind CSS Input
Build Tailwind CSS input components with labels, placeholders, floating labels, sizes, pill shapes, helper text, read-only, disabled, and validation states.
Heads up!
By default Preline UI uses Tailwind CSS Forms plugin. Don't forget to install it!
Input with placeholder
Use placeholder text to show an example or expected value inside the field.
Input with label
Pair the field with a visible label when people need clear context before entering a value.
Hidden label input
Hide the <label> visually with .sr-only while keeping it available to assistive technologies.
Stone style input
Use a muted stone background when you want a softer, less prominent field style.
Floating label
Floating labels require a placeholder because this pattern relies on :placeholder-shown, and the <input> must come before the label so the sibling selector can work.
Filled floating label
When the field already has a value, the label stays in its floated position automatically.
Input with helper text
Add helper text below the field for extra guidance, requirements, or formatting hints.
Input with inline helper text
Place supporting text inline with the label when space is limited.
Input with corner hint
Add a short hint in the corner for optional context like limits, formats, or field status.
Validation states
Use validation states to provide clear HTML5 form feedback for valid and invalid input.