Skip to content

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

Free

Textarea with Helper Text Above Field for React

Description, then Provide a detailed description and Markdown is supported, above a six-row box with a heading placeholder.

Description is the label. Next: Provide a detailed description. Markdown is supported. The box is six rows. The placeholder starts with a heading, then a blank line, then Your description here...

Put the format here so people see it before they write. The box does not render Markdown. Picking a template instead is a Select. React with Base UI leaves the text plain.

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="project-description">Description</FieldLabel>
  <FieldDescription>
    Provide a detailed description. Markdown is supported.
  </FieldDescription>
  <Textarea
    id="project-description"
    placeholder="# Heading&#10;&#10;Your description here..."
    rows={6}
  />
</Field>

FAQ

Why is the Markdown note above the box?

FieldDescription sits between FieldLabel and Textarea. It reads Provide a detailed description. Markdown is supported.

How tall is the description box?

rows is 6. The label is Description, and FieldLabel names the textarea. Its htmlFor matches the control's id.

How does the placeholder show more than one line?

The placeholder starts with a heading, then a blank line, then Your description here. The source writes each of those breaks as a newline entity in the placeholder string.

Does this box format Markdown?

The description says Markdown is supported. The control is a Textarea with that sentence above it.

Is the label beside the box?

No. orientation is unset, so the field stays vertical. max-w-md caps the width.

How do I move the note under the box?

Put FieldDescription after the Textarea. The placeholder can stay as the sample of the heading layout.

API Reference

Field

Sets htmlFor="project-description". The rest is on the Field page.

Textarea

Sets id="project-description", placeholder="# Heading&#10;&#10;Your description here..." and rows={6}. The rest is on the Textarea page.

All 38 field examples