본문으로 건너뛰기
Amineslab UI

Component

Textarea

여러 줄의 사용자 입력을 받습니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px
Controls

비어 있을 때 안내 문구

elevation 아래 불투명 바탕

초기 줄 수

control 높이

필드 표면

사용자가 조절할 수 있는 방향

글자 수와 maxLength 표시

최대 글자 수

오류 상태

비활성

Code
import { Textarea } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<Textarea aria-label="설명" placeholder={"설명을 입력해 주세요"} disabled={false} invalid={false} maxLength={120} resize={"vertical"} rows={3} size={"md"} showCount={true} variant={"filled"} opaque={false}/>))
}

Props

@amineslab/ui에서 Textarea를 가져옵니다.

import { Textarea } from '@amineslab/ui'

Textarea

HTML <textarea> 요소의 표준 속성을 그대로 받습니다.

NameTypeDefaultDescription
variant'filled' | 'outline''filled'textarea 필드의 표면 표현입니다.
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'입력 요소의 높이와 내부 여백입니다.
invalidbooleanfalse오류 시각 상태와 aria-invalid를 활성화합니다.
resize'none' | 'vertical' | 'horizontal' | 'both''vertical'사용자가 조절할 수 있는 방향입니다.
showCountbooleanfalse현재 글자 수와 maxLength를 표시합니다.
footerReactNode-입력 아래에 표시할 보조 영역입니다.
wrapperClassNamestring-textarea 래퍼에 추가할 클래스입니다.
opaquebooleanfalseelevation 레이어 아래 불투명한 테마 바탕을 추가합니다. hover·focus·invalid 표현은 유지합니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

공통 필드 표면

variant는 filled·outline 표현을, opaque는 elevation 아래의 불투명 바탕을 정합니다. focus와 hover는 중립 elevation을 사용하고 invalid 테두리는 포커스 중에도 유지합니다. NumberInput·PhoneInput·PasswordInput은 Input의 아이콘·문자열·ReactNode 슬롯을 상속합니다. SelectField에서는 같은 표면 props를 직접 지정하거나 triggerProps로 세부 설정할 수 있습니다.

투명 바탕
불투명 바탕
Outline + 불투명 바탕
<Textarea placeholder="설명 입력" />

<Textarea placeholder="설명 입력" opaque />

<Textarea placeholder="설명 입력" variant="outline" opaque />

Description and error

Textarea는 Field.Description·Field.Error와 조합합니다. 오류가 있으면 설명 대신 오류를 표시하고 입력에 접근성 정보를 연결합니다. label·description·error를 props로 전달하려면 TextareaField를 사용할 수 있습니다.

0 / 120

자신을 120자 이내로 소개해 주세요.

0 / 120
import { type ComponentPropsWithoutRef } from 'react'

import { cn } from '@amineslab/ui/utils'

import { Field, Textarea } from '@amineslab/ui'

function ExampleStack({ className, compact = false, fullWidth = false, ...props }: ComponentPropsWithoutRef<'div'> & {
    compact?: boolean;
    fullWidth?: boolean;
}) {
    return (<div {...props} className={cn('grid', compact ? 'w-auto gap-2' : fullWidth ? 'w-full gap-4' : 'w-full max-w-[360px] gap-3', className)}/>);
}

export default function ExamplePreview() {
  return ((<ExampleStack>
          <Field.Root>
            <Field.Label>소개</Field.Label>
            <Field.Control>
              <Textarea maxLength={120} showCount rows={3}/>
            </Field.Control>
            <Field.Description>자신을 120자 이내로 소개해 주세요.</Field.Description>
          </Field.Root>
          <Field.Root invalid>
            <Field.Label>문의 내용</Field.Label>
            <Field.Control>
              <Textarea maxLength={120} showCount rows={3}/>
            </Field.Control>
            <Field.Error>문의 내용을 입력해 주세요.</Field.Error>
          </Field.Root>
        </ExampleStack>))
}

Character count

0 / 80
import { Textarea } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<Textarea aria-label="소개" maxLength={80} placeholder="80자 이내" rows={2} showCount/>))
}

Footer slot

Markdown을 지원합니다.0 / 120
import { Textarea } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<Textarea aria-label="메모" footer="Markdown을 지원합니다." rows={3} showCount maxLength={120}/>))
}

TextareaField로 사용하기

TextareaField는 기본 입력에 label·required·description·error를 함께 제공합니다. FormStack 안에 직접 넣으며 FormField로 다시 감싸지 않습니다.

라벨·설명·필수 표시를 Field가 함께 처리합니다.

import { useState } from 'react'

import { TextareaField } from '@amineslab/ui'

const fieldDescription = '라벨·설명·필수 표시를 Field가 함께 처리합니다.';

function TextareaFieldExample() {
    const [value, setValue] = useState('');
    return (<TextareaField label="소개" description={fieldDescription} required value={value} onValueChange={setValue}/>);
}

export default function ExamplePreview() {
  return (<TextareaFieldExample />)
}

사용 기준

권장하는 사용
  • 예상 분량에 맞는 초기 rows와 명확한 도움말을 제공합니다.
피해야 할 사용
  • 한 줄 값에 높이가 큰 textarea를 쓰지 마세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

  • Tab: textarea로 포커스 이동