@olundot/ui · Form

Textarea

사유, 노트, 설명, 감사 코멘트 등 여러 줄 텍스트 입력을 위한 필드입니다.

크기
compact · default · large
상태
default · error · readOnly · disabled
핵심 토큰
bg-surface · border · focus-ring · text-tertiary

기본

interactive (maxLength + 라이브 counter)

감사 기록에 남을 사유를 10자 이상 입력합니다.

0/500

코드 보기tsx
import { Textarea } from "@olundot/ui";

export function CorrectionReasonField() {
  return (
    <Textarea
      label="정정 사유"
      name="reason"
      placeholder="정정 사유를 입력하세요"
      maxLength={500}
      message="감사 기록에 남을 사유를 10자 이상 입력합니다."
    />
  );
}

크기

비교용 정적 (size 3종)
코드 보기tsx
import { Textarea } from "@olundot/ui";

export function TextareaSizes() {
  return (
    <div style={{ display: "grid", gap: "16px" }}>
      <Textarea label="간단 메모 (sm)" name="sm" size="sm" placeholder="짧은 메모" />
      <Textarea label="기본 설명 (md)" name="md" size="md" placeholder="기본 설명" />
      <Textarea label="긴 응답 (lg)" name="lg" size="lg" placeholder="긴 응답 입력" />
    </div>
  );
}

상태

라이브 검증 (10자 기준) · readOnly · disabled

10자 이상 입력합니다.

0/500

코드 보기tsx
import { useState } from "react";
import { Textarea } from "@olundot/ui";

// 정정 사유 라이브 검증 — 10자 미만 = error, 10자 이상 = success.
// readOnly / disabled는 별도 인스턴스 (정적 상태 reference).
export function TextareaStates() {
  const [value, setValue] = useState("");
  const isEmpty = value === "";
  const isValid = value.length >= 10;
  const state = isEmpty ? "default" : isValid ? "success" : "error";
  const message = isEmpty
    ? "10자 이상 입력합니다."
    : isValid
      ? "유효한 사유입니다."
      : `10자 이상 (현재 ${value.length}자).`;
  return (
    <div style={{ display: "grid", gap: "16px" }}>
      <Textarea
        label="정정 사유"
        name="reason"
        placeholder="정정 사유를 입력하세요"
        maxLength={500}
        value={value}
        onChange={(event) => setValue(event.target.value)}
        state={state}
        message={message}
      />
      <Textarea label="읽기 전용" name="ro" defaultValue="감사 보관된 사유" readOnly />
      <Textarea label="비활성" name="off" defaultValue="제출 잠금" disabled />
    </div>
  );
}