Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Simple Input with Label Field for React

An Email label above an email field. The placeholder is you@example.com, and it clears as soon as someone types.

Email sits above an email field. The placeholder is you@example.com, and it clears once someone types. There is no hint under the field.

Start here for a short value with a visible name. An icon or a prefix inside the field is an Input Group. Base UI in React does not check the address.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Field anatomy: root, label, input, description, error

Usage

<Field className="max-w-md">
  <FieldLabel htmlFor="newsletter-email">Email</FieldLabel>
  <Input id="newsletter-email" placeholder="you@example.com" type="email" />
</Field>

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.

How do I add a hint under the input?

Put FieldDescription after the Input. This demo is only the label and the input.

How do I show an error on this field?

Set invalid on Field when the value fails, and render the message with FieldError. The input still holds the value.

API Reference

Field

Sets htmlFor="newsletter-email". The rest is on the Field page.

Input

Sets id="newsletter-email", placeholder="you@example.com" and type="email". The rest is on the Input page.

All 38 field examples