이로울 | 포트폴리오

Button Input Textarea Checkbox Radio Badge Select Toast Alert Modal Feedback RichTextEditor SideListMenu Pagination Calendar ApiHealthBadge TechBadge ButtonLink Icons AppSwiper

Textarea

Interactive UI Explorer

아래에서 각 컴포넌트의 다양한 Variants와 States를 문서화된 형태로 테스트해볼 수 있습니다.

Textarea

관리자 페이지, 회원가입, 게시글 작성 등에서 반복 사용 가능한 범용 Textarea 컴포넌트입니다.
label, error, helperText, maxLength+글자 수 표시, autoResize, resize 제어, forwardRef 등 실무에서 필요한 기능을 지원합니다.

기본 Textarea

label, placeholder가 있는 기본 사용 예시

Source Code

          <Textarea
            label="메모"
            placeholder="메모를 입력하세요"
            rows={3}
          />

메모

Live Preview

상태별 (error, disabled, readOnly, helperText)

에러, 비활성화, 읽기전용, 도움말 텍스트

Error

<Textarea label="에러" error="이 필드는 필수입니다." />

에러 상태

이 필드는 필수입니다.

Live Preview

Disabled

<Textarea label="비활성화" disabled placeholder="입력 불가" />

비활성화

Live Preview

Read Only

<Textarea label="읽기전용" readOnly value="수정할 수 없는 내용" />

읽기 전용

수정할 수 없는 내용입니다.

Live Preview

Helper Text

<Textarea label="도움말" helperText="100자 이내로 입력해주세요." />

도움말

100자 이내로 입력해주세요.

Live Preview

maxLength + 글자 수 표시

게시글 본문, 상품 설명 등 길이 제한 시 사용

Source Code

          <Textarea
            label="게시글 본문"
            placeholder="내용을 입력하세요"
            maxLength={500}
            showCount
            rows={5}
            value={postValue}
            onChange={setPostValue}
          />

게시글 본문

0 / 500

게시글에 공개될 본문 내용입니다.

Live Preview

자동 높이 조절 (autoResize)

입력 내용에 따라 높이가 자동으로 늘어납니다. minRows, maxRows로 범위 제한

Source Code

          <Textarea
            label="댓글"
            placeholder="댓글을 입력하세요"
            autoResize
            minRows={2}
            maxRows={8}
            value={bioValue}
            onChange={setBioValue}
          />

댓글 (자동 높이)

Live Preview

resize 제어

resize: none(기본) | vertical | both

None

<Textarea label="고정" resize="none" rows={3} />

고정 (none)

Live Preview

Vertical

<Textarea label="세로만" resize="vertical" rows={3} />

세로만 (vertical)

Live Preview

Both

<Textarea label="가로+세로" resize="both" rows={3} />

가로+세로 (both)

Live Preview

Controlled / Uncontrolled

value+onChange로 제어 모드, defaultValue로 비제어 모드

Source Code

          // Controlled
          const [value, setValue] = useState('');
          <Textarea value={value} onChange={setValue} />

          // Uncontrolled
          <Textarea defaultValue="초기값" ref={textareaRef} />

Controlled (useState)

현재 길이: 0자

Live Preview

폼 조합 예시 (회원가입 / 게시글 작성)

Input, Select, Textarea를 함께 사용하는 실무 폼

Source Code

          <form className="space-y-4 max-w-xl">
            <Input label="제목" placeholder="제목을 입력하세요" />
            <Select label="카테고리" options={options} placeholder="선택" />
            <Textarea
              label="본문"
              placeholder="내용을 입력하세요"
              maxLength={1000}
              showCount
              autoResize
              minRows={4}
              maxRows={12}
            />
          </form>

Live Preview