@olundot/ui · Form

Select

미리 정의된 옵션 목록에서 하나를 선택하는 드롭다운 필드입니다.

크기
sm · md · lg
상태
default · error · disabled · option disabled
핵심 토큰
bg-surface · border · focus-ring · text-tertiary(placeholder/chevron)

기본

interactive (placeholder 시작 · clearable reset)

요청과 가장 가까운 유형을 선택합니다.

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

const options = [
  { value: "answer-key", label: "정답 키" },
  { value: "score", label: "점수" },
  { value: "metadata", label: "메타데이터" },
];

// `clearable` prop이 내부 sentinel을 자동 처리한다 — 사용처는 value=""
// 표준 모델만 사용하면 된다 (sentinel 수동 관리 불필요).
export function CorrectionTypeSelect() {
  const [value, setValue] = useState("");
  return (
    <Select
      label="정정 유형"
      name="correctionType"
      placeholder="선택"
      message="요청과 가장 가까운 유형을 선택합니다."
      value={value}
      onValueChange={setValue}
      clearable
      options={options}
    />
  );
}

크기

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

const opts = [
  { value: "live", label: "실시간" },
  { value: "practice", label: "연습" },
];

export function SelectSizes() {
  return (
    <div style={{ display: "grid", gap: "16px" }}>
      <Select label="조밀 (sm)" name="sm" size="sm" options={opts} placeholder="선택" />
      <Select label="기본 (md)" name="md" size="md" options={opts} placeholder="선택" />
      <Select label="강조 (lg)" name="lg" size="lg" options={opts} placeholder="선택" />
    </div>
  );
}

상태

라이브 검증 (required, clearable reset) · disabled · option disabled

필수 선택 항목입니다.

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

const options = [
  { value: "answer-key", label: "정답 키" },
  { value: "score", label: "점수" },
  { value: "metadata", label: "메타데이터" },
];

// 정정 유형 라이브 검증 — value="" = error(placeholder 표시), 선택 = success.
// `clearable` prop이 dropdown에 reset 옵션(label = placeholder "선택")을 자동
// 삽입한다. reset 옵션 클릭 → onValueChange("") → trigger placeholder 복귀.
export function SelectStates() {
  const [value, setValue] = useState("");
  const isEmpty = value === "";
  const state = isEmpty ? "error" : "success";
  const message = isEmpty ? "필수 선택 항목입니다." : "선택 완료.";
  return (
    <div style={{ display: "grid", gap: "16px" }}>
      <Select
        label="정정 유형"
        name="correctionType"
        placeholder="선택"
        options={options}
        value={value}
        onValueChange={setValue}
        clearable
        state={state}
        message={message}
      />
      <Select label="비활성" name="off" disabled placeholder="선택" options={[{ value: "a", label: "A" }]} />
      <Select label="옵션 비활성" name="opt" placeholder="선택"
        options={[{ value: "a", label: "A" }, { value: "b", label: "B (마감)", disabled: true }]} />
    </div>
  );
}