텍스트 영역

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

export function TextareaDemo() {

Textarea는 여러 줄 텍스트 입력입니다. 양쪽 백엔드 모두 래퍼 라이브러리 없이 스타일만 입힌 네이티브 <textarea> 요소이며, CSS field-sizing: content로 내용에 따라 자동 확장됩니다. 네오브루탈리즘 공식(두꺼운 테두리, 선명한 그림자, 굵은 서체)에 맞춰 스타일을 입혔습니다.

다음과 같은 경우에 사용합니다.

• 댓글과 답글 — 게시물, 리뷰, 티켓의 자유 형식 응답.
• 소개와 설명 — 프로필 소개, 상품 설명, 설정 폼 문단.
• 피드백·지원 폼 — 버그 신고와 문의처럼 한 줄보다 긴 메시지.

설치#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/textarea.json
npx shadcn@latest add https://neobrutalism.com/r/base/textarea.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/textarea.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/textarea.json
복사

import * as React from "react"

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

function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "flex field-sizing-content min-h-16 w-full rounded border-2 bg-input px-3 py-2 text-sm shadow-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive",
        className
      )}
      {...props}
    />
  )
}

export { Textarea }

사용법#

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

복사<Textarea />

예제#

Field#

Field, FieldLabel, FieldDescription을 사용하여 라벨과 설명이 있는 텍스트 영역을 만듭니다.

import {
  Field,
  FieldDescription,

비활성화#

텍스트 영역을 비활성화하려면 disabled prop을 사용합니다. 비활성 상태에 스타일을 적용하려면 Field 컴포넌트에 data-disabled 속성을 추가합니다.

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

잘못된 값#

텍스트 영역을 잘못된 것으로 표시하려면 aria-invalid prop을 사용합니다. 잘못된 상태에 스타일을 적용하려면 Field 컴포넌트에 data-invalid 속성을 추가합니다.

import {
  Field,
  FieldDescription,

Button#

Button과 함께 사용하여 제출 버튼이 있는 텍스트 영역을 만듭니다.

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

RTL#

Neobrutalism에서 RTL 지원을 활성화하는 방법은 RTL 설정 가이드를 참고하세요.

"use client"

import * as React from "react"

접근성#

네이티브 폼 컨트롤이라 textarea의 키보드 접근은 공짜입니다. Tab으로 포커스하고, Enter는 폼 제출이 아니라 줄바꿈을 넣습니다. ARIA 패턴은 적용되지 않습니다. 항상 보이는 레이블과 짝지으세요. Field 예제처럼 FieldLabel이 htmlFor 배선을 처리합니다. 유효성 검사에는 textarea에 aria-invalid를 두고 aria-describedby로 오류 메시지를 참조해 스크린 리더가 둘 다 읽게 하세요.