@olundot/ui · Inputs

Textarea

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

크기
sm · md · lg
상태
default · error · success · readOnly · disabled
라벨 리듬
Input · Select와 같이 label과 control 사이를 12px 리듬으로 맞춥니다.
핵심 토큰
bg-surface · border · focus-ring · text-tertiary

기본

최대 길이와 글자 수

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

0/500

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

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

필수 제약

required, minLength, maxLength

10자 이상 500자 이하로 입력합니다.

0/500

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

export function RequiredCorrectionReasonField() {
  return (
    <Textarea surface="canvas"
      label="정정 사유"
      name="requiredReason"
      required
      minLength={10}
      maxLength={500}
      placeholder="정정 사유를 입력하세요"
      message="10자 이상 500자 이하로 입력합니다."
    />
  );
}

크기

입력량에 맞춰 sm · md · lg 선택
코드 보기tsx
import { Textarea } from "@olundot/ui";

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

상태

error, success, 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 surface="canvas"
        label="정정 사유"
        name="reason"
        placeholder="정정 사유를 입력하세요"
        maxLength={500}
        value={value}
        onChange={(event) => setValue(event.target.value)}
        state={state}
        message={message}
      />
      <Textarea surface="canvas" label="읽기 전용" name="ro" defaultValue="감사 보관된 사유" readOnly />
      <Textarea surface="canvas" label="비활성" name="off" defaultValue="제출 잠금" disabled />
    </div>
  );
}