shadcn.io is not affiliated with official shadcn/ui
Field examples · Basic Inputs
Simple Input with Label Field for React
An email input with its label above it.
Framework
UI library
The basic field: a FieldLabel above an email Input, in a Field that keeps them together and spaced. Start here and add a FieldDescription or FieldError as the form needs them.
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
How does the Email label connect to the input?
FieldLabel names the input. Its htmlFor matches the control's id. The label text is Email.
Why is the label above the input?
orientation defaults to vertical, so the label stacks over the control. Field sets data-orientation to that value.
Why is this input an email field?
type is email. The placeholder is you@example.com, and it clears once someone types.
How wide is the field?
max-w-md on Field caps the width. The label and the input both fill that width in the vertical layout.
Related
- Input with Description Below FieldA username input with helper text under 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
- Fieldset with LegendAn address fieldset with a legend, a
- Multiple Inputs in Group FieldFirst name, last name and email inputs