Skip to content

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

Free

Input with Description Above Field for React

A Password label, the rule Must be at least 8 characters long, then a masked field whose placeholder is a row of asterisks.

Password is the label. Before the field: Must be at least 8 characters long. The field is masked, and the placeholder is a row of asterisks.

Put the rule here when people should read it before they type. A control that can show the password is Password Input. In React, Base UI does not measure the password.

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="signup-password">Password</FieldLabel>
  <FieldDescription>Must be at least 8 characters long.</FieldDescription>
  <Input id="signup-password" placeholder="********" type="password" />
</Field>

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.

How do I show a failure separately from the rule?

Keep the 8 character rule in FieldDescription. Set invalid on Field and render the failure with FieldError.

How do I move the rule under the input?

Put FieldDescription after the Input. That order suits a hint people can read while the value is already filled.

API Reference

Field

Sets htmlFor="signup-password". The rest is on the Field page.

Input

Sets id="signup-password", placeholder="********" and type="password". The rest is on the Input page.

All 38 field examples