Skip to content

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

Free

Vertical Layout (Default) Field for React

Name and Email stacked, each label above its field, with a public-display note under Name and a privacy note under Email.

Two fields, labels above the inputs. Name is text, placeholder Your name, then This will be displayed publicly. Email is an email field, placeholder you@example.com, then We'll never share your email.

This is the default when the form reads top to bottom at any width. A lone email with no note is an Input. In React, Base UI does not publish the name.

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

<FieldGroup className="max-w-md">
  <Field>
    <FieldLabel htmlFor="profile-vertical-name">Name</FieldLabel>
    <Input id="profile-vertical-name" placeholder="Your name" type="text" />
    <FieldDescription>This will be displayed publicly.</FieldDescription>
  </Field>
  <Field>
    <FieldLabel htmlFor="profile-vertical-email">Email</FieldLabel>
    <Input
      id="profile-vertical-email"
      placeholder="you@example.com"
      type="email"
    />
    <FieldDescription>We'll never share your email.</FieldDescription>
  </Field>
</FieldGroup>

FAQ

What makes this layout vertical?

Neither Field sets orientation, so both stay at the default vertical. The label stacks over the input, and FieldDescription follows the input.

What does each description say?

Name's description reads This will be displayed publicly. Email's description reads We'll never share your email.

What are the two inputs?

Name is type text with placeholder Your name. Email is type email with placeholder you@example.com.

How do the labels connect?

Each FieldLabel inside its Field names that input. The labels are Name and Email.

What does FieldGroup do here?

FieldGroup stacks the two fields in one column, capped with max-w-md. There is no FieldSet and no legend.

How do I put a label beside its input?

Set orientation to horizontal on that Field. Leave it unset to keep the stack this demo uses.

API Reference

Field

Sets htmlFor="profile-vertical-name" and htmlFor="profile-vertical-email". The rest is on the Field page.

Input

Sets id="profile-vertical-name", placeholder="Your name", type="text", id="profile-vertical-email", placeholder="you@example.com" and type="email". The rest is on the Input page.

All 38 field examples