Textarea

메모나 설명처럼 여러 줄로 길어질 수 있는 텍스트를 입력할 때 사용합니다.

미리보기

투자 메모와 입력 상태

240자 제한이 있는 편집 가능한 메모를 명시적인 오류 상태 및 비활성 메모 입력과 비교합니다.

투자 메모

오류 상태

비활성

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/textarea

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

투자 메모와 입력 상태

npx shadcn@latest add @neumorphism-ui/label @neumorphism-ui/textarea

Registry JSON

사용법

보이는 Label을 연결하고 name과 rows를 지정하세요. 용도에 맞는 제약과 도움말을 추가하고 짧은 한 줄 값에는 Input을 사용합니다.

"use client";

import { useId } from "react";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

export default function Example() {
  const id = useId();
  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Project description</Label>
      <Textarea id={id} name="description" placeholder="Describe your project" rows={4} />
    </div>
  );
}

API 레퍼런스

native textarea의 모든 속성을 전달하며 최소 높이, 세로 resize, focus와 aria-invalid 상태를 뉴모피즘 토큰으로 표현합니다.

컴포넌트	속성	타입	기본값	설명
`Textarea`	`value / defaultValue`	`string`	`—`	controlled 또는 초기 uncontrolled 텍스트입니다.
`Textarea`	`rows`	`number`	`—`	초기 표시 행 수입니다.
`Textarea`	`placeholder`	`string`	`—`	입력 형식을 보조하는 짧은 예시입니다.
`Textarea`	`disabled / required / readOnly`	`boolean`	`false`	native 입력 제약을 설정합니다.
`Textarea`	`aria-invalid`	`boolean \| string`	`—`	오류 테두리와 focus ring을 활성화합니다.

미리보기

투자 메모와 입력 상태

설치

사용법

API 레퍼런스

접근성