Skip to content

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

Free

Input with Description Below Field for React

A Username field with the placeholder johndoe, and the line Choose a unique username for your account under the field.

Username sits above the field. The placeholder is johndoe. Under the field: Choose a unique username for your account.

This order suits a hint people read while the value is filled. The field itself is an Input and does not know if the name is free. Base UI in React does not reserve it.

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="account-username">Username</FieldLabel>
  <Input id="account-username" placeholder="johndoe" type="text" />
  <FieldDescription>
    Choose a unique username for your account.
  </FieldDescription>
</Field>

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.

What type is the input?

type is text. orientation is left unset, so the field stays vertical.

How wide is the field?

max-w-md on Field caps the width. The label, input, and description all use that column.

How do I put the hint above the input instead?

Move FieldDescription so it sits between FieldLabel and Input. That order shows the sentence before anyone types.

API Reference

Field

Sets htmlFor="account-username". The rest is on the Field page.

Input

Sets id="account-username", placeholder="johndoe" and type="text". The rest is on the Input page.

All 38 field examples