Skip to content

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

Free

Textarea with Helper Text Above Field for Solid

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

UI library: Ark UI

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. Solid with Ark UI leaves the text plain.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Field class="max-w-md">
    <FieldLabel>Description</FieldLabel>
    <FieldDescription>
      Provide a detailed description. Markdown is supported.
    </FieldDescription>
    <Textarea 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. Field connects the two for you, with no ids to write.

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

No extra props in this demo. The rest is on the Field page.

Textarea

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

All 38 field examples