shadcn.io is not affiliated with official shadcn/ui
Field examples · Basic Inputs
Input with Description Below Field for React
A username input with helper text under it.
Framework
UI library
The usual order for a hint: label, input, then a FieldDescription under it. Under the Username field it asks for a unique username, the kind of note people read once they've seen the field.
Preview
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
FAQ
Where does the helper text sit?
The order inside Field is FieldLabel, then Input, then FieldDescription. The description reads Choose a unique username for your account.
How does Username name the input?
FieldLabel names the input. Its htmlFor matches the control's id. The label text is Username.
What is the placeholder for?
The placeholder is johndoe, and it clears once someone types. The description stays under the field.
Related
- Simple Input with Label FieldAn email input with its label above it
- Input with Description Above FieldA password input with its requirement
- Horizontal Layout Input FieldAn input with its label beside it in a
- Complex Multi-Field FormA personal information fieldset with
- Field Group with SeparatorTwo notification fieldsets of checkboxes
- Multiple Inputs in Group FieldFirst name, last name and email inputs