@olundot/ui · Selection

Select

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

크기
sm · md · lg
상태
default · error · disabled · option disabled
Reset
clearable 기본 true · value=""가 선택 안 함 상태
핵심 토큰
bg-surface · bg-raised(menu) · border · focus-ring · z-popover · text-tertiary(placeholder/chevron)

기본

선택 안 함 상태와 기본 reset

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

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

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

// clearable 기본값은 true이며 value=""가 선택 안 함 상태이다.
export function CorrectionTypeSelect() {
  const [value, setValue] = useState("");
  return (
    <Select surface="canvas"
      label="정정 유형"
      name="correctionType"
      placeholder="선택"
      message="요청과 가장 가까운 유형을 선택합니다."
      value={value}
      onValueChange={setValue}
      options={options}
    />
  );
}

크기

필터 밀도와 입력 맥락에 맞춰 선택
코드 보기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 surface="canvas" label="조밀 (sm)" name="sm" size="sm" defaultValue="live" options={opts} placeholder="선택" />
      <Select surface="canvas" label="기본 (md)" name="md" size="md" defaultValue="practice" options={opts} placeholder="선택" />
      <Select surface="canvas" label="강조 (lg)" name="lg" size="lg" defaultValue="live" options={opts} placeholder="선택" />
    </div>
  );
}

상태

필수 선택, reset, 비활성 옵션

필수 선택 항목입니다.

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

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

// 정정 유형 예제 — value="" = unselected/error(placeholder 표시), 선택 = success.
// clearable 기본값은 true이며 reset 옵션은 onValueChange("")를 호출한다.
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 surface="canvas"
        label="정정 유형"
        name="correctionType"
        placeholder="선택"
        options={options}
        value={value}
        onValueChange={setValue}
        state={state}
        message={message}
      />
      <Select surface="canvas" label="비활성" name="off" disabled defaultValue="a" placeholder="선택" options={[{ value: "a", label: "A" }]} />
      <Select surface="canvas" label="옵션 비활성" name="opt" defaultValue="a" placeholder="선택"
        options={[{ value: "a", label: "A" }, { value: "b", label: "B (마감)", disabled: true }]} />
    </div>
  );
}