@olundot/ui · Form

RadioGroup

소수의 상호 배타적 선택지를 제공하는 단일 선택 옵션 세트입니다.

변형
단순(RadioGroup) · 카드형(RadioCardGroup) 두 변형 제공
단순형
orientation vertical · horizontal, description 선택, required, disabled
카드형
columns one · two · three (RadioCardColumns), density comfortable · compact

단순 라디오

라이브 선택 — 단순형 (RadioGroup)

감독관이 입장 상태를 확인합니다.

응시 기록만 저장합니다.

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

export function DeliveryModeSimple() {
  return (
    <RadioGroup
      aria-label="응시 방식"
      name="deliverySimple"
      defaultValue="live"
      options={[
        { value: "live", label: "실시간 시험", description: "감독관이 입장 상태를 확인합니다." },
        { value: "practice", label: "연습 시험", description: "응시 기록만 저장합니다." },
        { value: "offline", label: "오프라인 시험" },
      ]}
    />
  );
}

카드형 기본

라이브 선택 — 카드형 (RadioCardGroup)
코드 보기tsx
import { RadioCardGroup } from "@olundot/ui";

export function DeliveryModeRadio() {
  return (
    <RadioCardGroup
      aria-label="응시 방식"
      name="delivery"
      defaultValue="live"
      options={[
        { value: "live", title: "실시간 시험", description: "감독관이 입장 상태를 확인합니다." },
        { value: "practice", title: "연습 시험", description: "응시 기록만 저장합니다." },
      ]}
    />
  );
}

컬럼 레이아웃

라이브 선택 · columns 비교 (one · two)
코드 보기tsx
import { RadioCardGroup } from "@olundot/ui";

const opts = [
  { value: "a", title: "옵션 A", description: "설명 A" },
  { value: "b", title: "옵션 B", description: "설명 B" },
  { value: "c", title: "옵션 C", description: "설명 C" },
  { value: "d", title: "옵션 D", description: "설명 D" },
];

export function RadioCardColumns() {
  return (
    <div style={{ display: "grid", gap: "24px" }}>
      <RadioCardGroup aria-label="1열" name="c1" options={opts} columns="one" />
      <RadioCardGroup aria-label="2열" name="c2" options={opts} columns="two" />
    </div>
  );
}

상태

라이브 선택 (defaultValue + 비활성 옵션)
코드 보기tsx
import { RadioCardGroup } from "@olundot/ui";

export function RadioCardStates() {
  return (
    <RadioCardGroup
      aria-label="상태"
      name="states"
      defaultValue="b"
      options={[
        { value: "a", title: "선택 가능", description: "기본 상태" },
        { value: "b", title: "선택됨", description: "현재 선택" },
        { value: "c", title: "비활성", description: "마감되었습니다.", disabled: true },
      ]}
    />
  );
}