선택 유형
single (radio) · multi (checkbox)
표시 변형
default · review-only · corrected-answer-display
접근성 기준
aria-label/aria-labelledby 필수 · 44px hit area

시험 선택지

single · 5지선다 기본
코드 보기tsx
import { ChoiceGroup } from "@olundot/ui";

export function ExamChoiceGroup() {
  return (
    <ChoiceGroup
      type="single"
      name="q1"
      aria-label="문제 1 보기"
      defaultValue="c1"
      options={[
        { value: "c1", body: "급성 심근경색" },
        { value: "c2", body: "불안정 협심증" },
        { value: "c3", body: "대동맥 박리" },
        { value: "c4", body: "폐색전증" },
        { value: "c5", body: "위식도역류병" },
      ]}
    />
  );
}

단일 선택

라디오 의미
코드 보기tsx
import { ChoiceGroup } from "@olundot/ui";

export function SingleChoiceGroup() {
  return (
    <ChoiceGroup
      type="single"
      name="response"
      defaultValue="standard"
      aria-label="응답 선택"
      options={[
        { value: "basic", body: "기본" },
        { value: "standard", body: "표준 응답" },
        { value: "advanced", body: "심화", disabled: true },
      ]}
    />
  );
}

다중 선택

체크박스 의미
코드 보기tsx
import { ChoiceGroup } from "@olundot/ui";

export function MultiChoiceGroup() {
  return (
    <ChoiceGroup
      type="multi"
      name="filters"
      defaultValue={["a"]}
      aria-label="복수 선택"
      options={[
        { value: "a", body: "A" },
        { value: "b", body: "B" },
        { value: "c", body: "C", disabled: true },
      ]}
    />
  );
}

복습 표시

복습 전용 · hover 없음
코드 보기tsx
import { ChoiceGroup } from "@olundot/ui";

export function ReviewChoiceGroup() {
  return (
    <ChoiceGroup
      type="single"
      variant="review-only"
      name="review"
      defaultValue="answer"
      aria-label="복습 표시"
      options={[
        { value: "wrong", body: "오답 선택" },
        { value: "answer", body: "정답 보기" },
      ]}
    />
  );
}

정답 표시

정답 강조
코드 보기tsx
import { ChoiceGroup } from "@olundot/ui";

export function CorrectedChoiceGroup() {
  return (
    <ChoiceGroup
      type="single"
      variant="corrected-answer-display"
      name="corrected"
      defaultValue="wrong"
      aria-label="정답 표시"
      options={[
        { value: "wrong", body: "오답 선택" },
        { value: "answer", body: "정답 보기", correct: true },
      ]}
    />
  );
}