@olundot/ui · Inputs

Input

식별자, 검색어, 짧은 값 입력을 위한 단일 행 텍스트 필드입니다.

상태
default · error · success · readOnly · disabled
핵심 토큰
bg-surface · border · focus-ring · text-primary
접근성 기준
보이는 라벨을 유지하고 도움말·오류 메시지는 aria-describedby로 연결합니다.

기본

라벨, 안내 메시지, 입력값

시험 카드에 표시된 학번을 입력합니다.

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

export function StudentNumberInput() {
  return (
    <Input surface="canvas"
      label="학번"
      name="studentNumber"
      required
      placeholder="20260001"
      autoComplete="username"
      message="시험 카드에 표시된 학번을 입력합니다."
    />
  );
}

필수 입력

required와 형식 안내

시험 카드의 학번 8자리를 입력합니다.

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

export function RequiredStudentNumberInput() {
  return (
    <Input surface="canvas"
      label="학번"
      name="studentNumber"
      required
      maxLength={8}
      placeholder="20260001"
      message="시험 카드의 학번 8자리를 입력합니다."
    />
  );
}

상태

default, error, success, disabled

8자리 숫자로 입력합니다.

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

// 8자리 숫자 학번 검증 — 사용자 입력에 따라 default → error → success로 자동 전이.
// disabled는 잠금 필드 예시 (사용자 상호작용 불가).
export function InputStates() {
  const [value, setValue] = useState("");
  const isEmpty = value === "";
  const isValid = /^\d{8}$/.test(value);
  const state = isEmpty ? "default" : isValid ? "success" : "error";
  const message = isEmpty
    ? "8자리 숫자로 입력합니다."
    : isValid
      ? "유효한 학번 형식입니다."
      : "숫자 8자리(예: 20260001).";
  return (
    <div style={{ display: "grid", gap: "16px" }}>
      <Input surface="canvas"
        label="학번"
        name="studentNumber"
        placeholder="20260001"
        maxLength={8}
        value={value}
        onChange={(event) => setValue(event.target.value)}
        state={state}
        message={message}
      />
      <Input surface="canvas" label="비활성" name="off" defaultValue="잠금됨" disabled />
    </div>
  );
}

자동 너비

내용 너비에 맞춘 필드
코드 보기tsx
import { Input } from "@olundot/ui";

// fullWidth={false} → w-fit (내용 너비에 자동 맞춤).
// 기본 fullWidth=true (w-full) 유지가 대부분 form 레이아웃에 적합.
// 옆에 다른 control을 inline으로 배치하거나 자동 너비 필드가 필요할 때 사용.
export function NarrowInput() {
  return (
    <div style={{ display: "flex", gap: "8px", alignItems: "flex-end" }}>
      <Input surface="canvas"
        label="페이지"
        name="page"
        type="number"
        defaultValue="1"
        fullWidth={false}
      />
      <Input surface="canvas"
        label="전체"
        name="total"
        type="number"
        defaultValue="50"
        readOnly
        fullWidth={false}
      />
    </div>
  );
}

읽기 전용

읽기 전용과 포커스 동작

감독관 확인 후 자동 채워집니다.

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

export function ReadonlyInput() {
  return (
    <Input surface="canvas"
      label="제출 토큰"
      name="token"
      defaultValue="A4F7-2K9P"
      readOnly
      message="감독관 확인 후 자동 채워집니다."
    />
  );
}