Live Docs

Forms /

stable

Textarea

Input multi-line untuk deskripsi, catatan, dan konten panjang. Support error state dan kontrol resize.

import { Textarea } from "@naraya/ui";

Overview

Gunakan Textarea saat input lebih dari satu baris. Untuk label, helper, dan error message yang konsisten, pasangkan dengan Field.

Examples

Default

<Textarea placeholder="Tulis deskripsi..." />

Controlled

const [value, setValue] = useState("");

<Textarea value={value} onChange={(e) => setValue(e.target.value)} />

Resize modes

<Textarea resize="vertical" />
<Textarea resize="horizontal" />
<Textarea resize="both" />
<Textarea resize="none" />

Error state

Minimal 20 karakter.

<Textarea error defaultValue="Konten terlalu pendek" />

Disabled

<Textarea disabled defaultValue="..." />

Props

PropTypeDefaultDescription
errorbooleanfalseAktifkan border/ring error.
resize"vertical" | "horizontal" | "both" | "none""vertical"Atur perilaku CSS resize.
disabledbooleanfalseNonaktifkan input.
...restTextareaHTMLAttributesSemua atribut native textarea (rows, value, onChange, maxLength, dsb).

Tokens Used

--bg-surface

Background textarea

--border-subtle

Border default

--color-primary

Focus ring

--color-error

Error border/ring

--radius-md

Border radius

Accessibility

  • Selalu pasangkan dengan label yang jelas via htmlFor/id.
  • Gunakan aria-describedby untuk helper text atau error text.
  • Pastikan state error diumumkan screen reader (contoh via Field role='alert').
  • Hindari placeholder sebagai satu-satunya konteks label.