shadcn.io is not affiliated with official shadcn/ui
Input examples · Standard
Input with Helper Text for React
An email field with helper text under it about how the address is used.
A short reassurance under a field answers the question people have before they type. This example puts We’ll never share your email with anyone else in a FieldDescription under the email input. Use helper text for privacy notes, format hints and anything people should know while they fill the field in.
Preview
Installation
FAQ
What is the line under the field?
A FieldDescription after the input, in smaller, muted text. Placed after the input, it reads as a note on what was typed rather than an instruction.
Why type email?
The browser checks the address format when the form is submitted, and mobile keyboards show the @ key. The placeholder you@example.com shows the expected shape.
When should the text go above the field instead?
When it changes what people will enter, such as what a username is for. The Description example puts it between the label and the input.
What about errors?
Keep the helper text for guidance and show problems in FieldError when the field is invalid, as the Error State example does.
Related
- Input with DescriptionA field with a description between its
- Input with LabelA text input with a label above it
- Required Field InputA required field with an asterisk in its
- Email Input FormA newsletter form with one email input
- Input with Description Below FieldA username input with helper text under it
- Input with Character CounterA field that counts the characters typed