@olundot/ui · Actions
ChoiceGroup
시험 답안 입력, 복습 표시, 정답 표시에 쓰는 단일/다중 선택 옵션 그룹입니다.
- 선택 유형
- 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 },
]}
/>
);
}