shadcn.io is not affiliated with official shadcn/ui
Field examples · Basic Inputs
Input with Description Above Field for React
A password input with its requirement stated between the label and the input.
Tell people the rule before they type. The FieldDescription sits between the Password label and the input, so the requirement is read before the field, not after a failed attempt. Use it for passwords, formats and anything with a constraint.
Preview
Installation
FAQ
Why is the rule above the password box?
FieldDescription sits between FieldLabel and Input, so Must be at least 8 characters long is visible before typing. The label still comes first.
How is the password masked?
type is password, so typed characters stay masked. The placeholder is a row of asterisks, and the rule above it stays readable.
How does the Password label connect?
FieldLabel names the input. Its htmlFor matches the control's id. The label text is Password.
Is this field horizontal?
No. orientation is unset, so it stays vertical: label, description, then input. max-w-md caps the width.
Related
- Simple Input with Label FieldAn email input with its label above it
- Input with Description Below FieldA username input with helper text under it
- Horizontal Layout Input FieldAn input with its label beside it in a
- Complex Multi-Field FormA personal information fieldset with
- Fieldset with LegendAn address fieldset with a legend, a
- Multiple Inputs in Group FieldFirst name, last name and email inputs