Skip to Content
ComponentsIcignalTextarea

Textarea

여러 줄의 텍스트를 입력할 수 있는 폼 컴포넌트

개요

Textarea는 여러 줄의 텍스트 입력을 위한 폼 컴포넌트입니다. 글자 수 카운터 기능을 내장하고 있으며, FormItem을 통해 레이블, 설명, 에러 메시지를 지원합니다.

주요 특징

  • ✅ 글자 수 카운터: showCount + maxLength 조합
  • ✅ 다양한 크기: sm, md, lg
  • ✅ FormItem 통합: 레이블, 설명, 에러 메시지
  • ✅ 접근성: 키보드 입력, 에러 상태 안내
  • ✅ 디자인 토큰: 테마 커스터마이징 지원

Sizes

States

분석 결과에 대한 인사이트를 기록하세요

0 / 500

사용 예시

예시 1: 리포트 작성

리포트 요약과 분석 내용을 입력합니다.

0 / 1000

예시 2: SQL 쿼리 입력

분석에 사용할 쿼리를 입력합니다.

분석에 사용할 SQL 쿼리를 입력하세요

API Reference

Props

PropTypeDefaultDescription
showCountboolean-글자 수 카운터 표시
maxLengthnumber-최대 글자 수
rowsnumber-표시 행 수
size"sm" | "md" | "lg"-컴포넌트 크기
disabledbooleanfalse비활성화 여부
labelstring-필드 레이블
labelWidthstring | number-레이블 너비
requiredbooleanfalse필수 여부
orientation"horizontal" | "vertical""horizontal"레이블-필드 배치 방향
descriptionstring-설명 텍스트
errorstring-에러 메시지
classNamestring-추가 CSS 클래스

<textarea> 요소의 기본 HTML 속성을 모두 지원합니다.

기본 사용법

import { Textarea } from "@vortex/ui-icignal"
 
<Textarea label="메모" placeholder="내용을 입력하세요" />
<Textarea label="요약" showCount maxLength={500} />

접근성

ARIA 속성

<Textarea label="설명" error="설명을 입력해주세요" />

권장 사항

  • ✅ label을 제공하여 입력 목적 전달
  • ✅ showCount와 maxLength로 입력 제한 안내
  • ✅ 에러 상태에서 구체적 메시지 제공
  • ❌ placeholder만으로 레이블 대체 지양

관련 컴포넌트

Last updated on
SwitchToggle