Skip to content

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

Free

Simple Textarea Field for React

A Message label above a textarea whose placeholder is Type your message here, with no hint under the box.

Message sits above the box. The placeholder is Type your message here... There is no hint under it.

Start here for a note longer than one line. A single-line message is an Input. On React, Base UI does not send what was typed.

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="contact-message-message">Message</FieldLabel>
  <Textarea
    id="contact-message-message"
    placeholder="Type your message here..."
  />
</Field>

FAQ

How does the Message label connect?

FieldLabel names the Textarea. Its htmlFor matches the control's id. The label text is Message, and it sits above the box.

How tall is this textarea?

rows is not set, so the height is the browser default. Pass rows on Textarea when you want a set number of lines.

What is the placeholder for?

The placeholder is Type your message here..., and it clears once someone types. This field has no FieldDescription.

Where is the typed text stored?

This textarea does not keep the text in component state. The browser holds what was typed until the form is submitted.

Why is the label above the box?

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

How do I add a sentence under the box?

Put FieldDescription after the Textarea. A rule people must read before typing belongs between the label and the textarea.

API Reference

Field

Sets htmlFor="contact-message-message". The rest is on the Field page.

Textarea

Sets id="contact-message-message" and placeholder="Type your message here...". The rest is on the Textarea page.

All 38 field examples