Textarea

Textarea 컴포넌트는 사용자로부터 여러 줄의 텍스트 데이터를 입력받기 위한 UI 요소입니다. 이 컴포넌트는 다양한 상태를 지원하며, 문자 수 카운터 기능을 제공합니다.

인터랙티브 예제

아래 UI에서 다양한 속성을 직접 변경하여 Textarea 컴포넌트의 모습을 확인해보세요.

라벨

힌트 텍스트

sizeselect

텍스트 영역의 크기

labelstring

라벨 텍스트

hintTextstring

힌트 텍스트

placeholderstring

플레이스홀더 텍스트

requiredboolean

필수 여부

disabledboolean

비활성화 여부

destructiveboolean

검증 오류 메시지 표시 여부

characterCountboolean

문자 수 카운트 여부

기본 사용법

import { Textarea } from '@ncds/ui-admin';

function App() {
  return <Textarea placeholder="텍스트를 입력하세요" />;
}

Props

Prop	Type	Default	Description
className	string	-	컴포넌트의 스타일을 커스터마이징하기 위한 추가 클래스명을 지정합니다.
label	string	-	텍스트 영역의 레이블 텍스트를 지정합니다.
hintText	string	-	텍스트 영역 아래에 표시되는 도움말 텍스트를 지정합니다.
required	boolean	false	필수 입력 필드로 표시할지 여부를 지정합니다.
disabled	boolean	false	텍스트 영역을 비활성화 상태로 표시할지 여부를 지정합니다.
destructive	boolean	false	오류 상태로 표시할지 여부를 지정합니다.
characterCount	boolean	false	문자 수 카운터를 표시할지 여부를 지정합니다.
maxLength	number	-	입력 가능한 최대 문자 수를 지정합니다. characterCount가 true일 때 사용됩니다.
size	'sm' \| 'md'	'md'	텍스트 영역의 크기를 지정합니다.
placeholder	string	-	텍스트 영역의 플레이스홀더를 지정합니다.

상세 예제 (Detailed Examples)

레이블과 힌트 텍스트

레이블과 힌트 텍스트를 사용하여 사용자에게 텍스트 영역에 대한 정보를 제공할 수 있습니다.

자기소개

간략하게 자기소개를 작성해주세요.

문자 수 카운터

characterCount와 maxLength 속성을 사용하여 문자 수 카운터를 표시할 수 있습니다.

메시지

0/200

오류 상태

destructive 속성을 사용하여 텍스트 영역을 오류 상태로 표시할 수 있습니다.

의견

의견은 필수 입력 항목입니다.

비활성화 상태

disabled 속성을 사용하여 텍스트 영역을 비활성화 상태로 표시할 수 있습니다.

읽기 전용 메모

복합 예제

여러 속성을 조합하여 다양한 형태의 텍스트 영역을 구성할 수 있습니다.

피드백

최대 100자까지 입력 가능합니다

0/100

인터랙티브 예제​

기본 사용법​

Props​

상세 예제 (Detailed Examples)​

레이블과 힌트 텍스트​

문자 수 카운터​

오류 상태​

비활성화 상태​

복합 예제​