Skip to content

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

Free

Simple Textarea Field for Solid

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

UI library: Ark UI

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 Solid, Ark UI does not send what was typed.

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

FAQ

How does the Message label connect?

FieldLabel names the Textarea. Field connects the two for you, with no ids to write. 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

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

Textarea

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

All 38 field examples