Textarea

Kolom teks banyak baris dengan tinggi minimum 64 dan radius 10. Tumbuh mengikuti isinya.

Instalasi

npx shadcn@latest add @glc/textarea

Pasang tema

Setiap komponen bergantung pada glc-theme. Lewati langkah ini kalau sudah pernah dijalankan.

npx shadcn@latest add @glc/glc-theme

Salin ke components/ui/textarea.tsx

import * as React from "react"

import { cn } from "@/registry/glc/lib/utils"

/**
 * Multi-line text field — the `Textarea` set from Company BookV1.0.fig.
 * Min-height 64, radius 10, padding 8/10, Inter 14/20.
 */
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-card px-2.5 py-2",
        "text-sm leading-5 text-foreground transition-[color,box-shadow] outline-none",
        "placeholder:text-[var(--text-placeholder)]",
        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20",
        "aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20",
        "disabled:cursor-not-allowed disabled:bg-[var(--surface-disabled)] disabled:text-[var(--text-disabled)]",
        className
      )}
      {...props}
    />
  )
}

export { Textarea }

Sesuaikan path import

Berkas di atas meng-import @/registry/glc/lib/utils. Ubah menjadi lokasi cn di proyekmu — biasanya @/lib/utils. CLI melakukan ini otomatis.

Penggunaan

import { Textarea } from "@/components/ui/textarea"

<Textarea placeholder="Catatan jurnal…" />

import { Textarea } from "@/registry/glc/ui/textarea"

export function TextareaDemo() {
  return (
    <Textarea
      className="max-w-sm"
      placeholder="Catatan jurnal…"
      aria-label="Catatan jurnal"
    />
  )
}

Status

Sama seperti Input: galat digerakkan aria-invalid, bukan prop error.

Tumbuh mengikuti isi

Uraian

Terkunci

import { Label } from "@/registry/glc/ui/label"
import { Textarea } from "@/registry/glc/ui/textarea"

export function TextareaStates() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <div className="flex flex-col gap-2">
        <Label htmlFor="textarea-grow">Tumbuh mengikuti isi</Label>
        {/* `field-sizing-content` is in the base class list, so the box grows
          * with the text without a resize observer or a hidden mirror div. */}
        <Textarea
          id="textarea-grow"
          defaultValue={"Pembayaran diterima sebagian.\nSisa Rp 4.200.000 jatuh tempo 30 Agustus."}
        />
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="textarea-invalid">Uraian</Label>
        <Textarea id="textarea-invalid" aria-invalid defaultValue="" />
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="textarea-disabled">Terkunci</Label>
        <Textarea id="textarea-disabled" disabled defaultValue="Periode sudah ditutup." />
      </div>
    </div>
  )
}

Tumbuh tanpa JavaScript

Kelas dasarnya memuat field-sizing-content, sehingga kotaknya melar mengikuti teks tanpa resize observer maupun div bayangan. Dukungan browsernya masih berkembang — di browser yang belum mendukung, tinggi minimumnya tetap dipakai dan pengguna menggulir seperti biasa.

Props

Tidak ada props tambahan. Seluruh atribut <textarea> diteruskan apa adanya.

Prop	Tipe	Default	Keterangan
`aria-invalid`	`boolean`	—	Menyalakan border dan cincin fokus merah.
`disabled`	`boolean`	`false`	Latar dan teks berubah ke token disabled.
`rows`	`number`	—	Tetap dihormati, tapi min-height 64 adalah batas bawahnya.
`className`	`string`	—	Digabung terakhir lewat cn(), jadi bisa menimpa kelas bawaan.

Kode sumber

import * as React from "react"

import { cn } from "@/registry/glc/lib/utils"

/**
 * Multi-line text field — the `Textarea` set from Company BookV1.0.fig.
 * Min-height 64, radius 10, padding 8/10, Inter 14/20.
 */
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-card px-2.5 py-2",
        "text-sm leading-5 text-foreground transition-[color,box-shadow] outline-none",
        "placeholder:text-[var(--text-placeholder)]",
        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20",
        "aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20",
        "disabled:cursor-not-allowed disabled:bg-[var(--surface-disabled)] disabled:text-[var(--text-disabled)]",
        className
      )}
      {...props}
    />
  )
}

export { Textarea }