Thành phần

Textarea

Multi-line text field with the 1px ink form line; invalid is a 2px rule.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Caption

State the source and the time of the photograph.

Install

bash

npx shadcn add @eloquent/textarea

Usage

tsx

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

<Field>
  <FieldLabel>Caption</FieldLabel>
  <Textarea rows={4} placeholder="Counting the votes at the town hall, 09:40." />
  <FieldDescription>State the source and the time of the photograph.</FieldDescription>
</Field>

States

Standfirst

Two sentences at most.

Correction

Describe the correction.

Legal note

State	Treatment
Default	Paper fill, ink text, 1px ink bottom rule
Hover	No change; controls change on press or focus only
Focus	2px ink outline, 2px offset
Invalid	2px ink bottom rule; `Field` adds the ink ! icon and message
Disabled	Halftone text and rule, `cursor-not-allowed`

Keyboard

Key	Action
Tab / Shift+Tab	Move focus to and from the textarea (disabled ones are skipped)
Enter	Insert a new line
Type	Edit the value

Vietnamese

Chú thích

Ghi rõ nguồn và thời điểm.

Ink adaptation

Upstream shadcn's rounded box, border, shadow and focus ring glow are removed. The field is one 1px ink bottom rule with a 96px minimum height; it resizes vertically only. Base UI has no Textarea part, so this renders Field.Control as a native <textarea>, which keeps the same Field wiring as Input.