텍스트 영역

텍스트 영역은 사용자가 키보드로 글자, 숫자, 기호 등이 조합된 여러 줄의 텍스트를 입력하는 경우에 사용하는 요소이다.

사용 지침

민원 사유·의견·후기처럼 한 줄로 표현하기 어려운 입력에 사용하고, 글자 수 카운터·최대 길이·크기 조절 정책을 명시해 사용자에게 입력 한계를 알려 줍니다.

레이블

0/100

examples/textarea/TextareaDefault.tsx

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

export default function TextareaDefault() {

레이블

11/100

examples/textarea/TextareaWithCounter.tsx

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

export default function TextareaWithCounter() {

레이블

21/100

examples/textarea/TextareaWithMaxLength.tsx

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

export default function TextareaWithMaxLength() {

기본 상태

0/100

Disabled 상태

8/100

ReadOnly 상태

읽기 전용 상태

8/100

examples/textarea/TextareaStates.tsx

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

export default function TextareaStates() {

메시지 입력

입력 가능한 글자수를 초과했습니다.

48/50

examples/textarea/TextareaErrorWithCounter.tsx

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

export default function TextareaErrorWithCounter() {

제어된 Textarea

8/100

8자 입력됨

examples/textarea/TextareaControlled.tsx

"use client"

import * as React from "react"

이름	타입	기본값	설명
aria-label	string	—	Defines a string value that labels the current element. @see aria-labelledby.
className	string	—	—
countTotal	number	100	—
defaultValue	string	—	—
disabled	boolean	—	—
error	ReactNode	—	—
hint	ReactNode	—	—
id	string	—	—
information	ReactNode	—	—
label	string	—	—
onChange	((value: string) => void)	—	—
onClick	MouseEventHandler<HTMLTextAreaElement>	—	—
showCount	boolean	true	—
style	CSSProperties	—	—
success	ReactNode	—	—
tabIndex	number	—	—
value	string	—	—