@olundot/ui · Selection
RadioGroup
소수의 상호 배타적 선택지를 제공하는 단일 선택 옵션 세트입니다.
- 값 모델
- value/defaultValue string · onValueChange(string)
- 표현
- appearance plain · card, columns one · two · three
- 접근성 기준
- radiogroup + aria-label/aria-labelledby + Radio children
단순 라디오
compound · appearance=plain코드 보기tsx
import { Radio, RadioGroup } from "@olundot/ui";
export function DeliveryModeSimple() {
return (
<RadioGroup
aria-label="응시 방식"
name="deliverySimple"
defaultValue="live"
>
<Radio value="live" description="감독관이 입장 상태를 확인합니다.">실시간 시험</Radio>
<Radio value="practice" description="응시 기록만 저장합니다.">연습 시험</Radio>
<Radio value="offline">오프라인 시험</Radio>
</RadioGroup>
);
}카드형 기본
appearance=card코드 보기tsx
import { Radio, RadioGroup } from "@olundot/ui";
export function DeliveryModeRadio() {
return (
<RadioGroup
aria-label="응시 방식"
name="delivery"
appearance="card"
defaultValue="live"
>
<Radio value="live" description="감독관이 입장 상태를 확인합니다.">실시간 시험</Radio>
<Radio value="practice" description="응시 기록만 저장합니다.">연습 시험</Radio>
</RadioGroup>
);
}컬럼 레이아웃
columns one · two 선택지 배치코드 보기tsx
import { Radio, RadioGroup } from "@olundot/ui";
export function RadioGroupColumns() {
return (
<div style={{ display: "grid", gap: "24px" }}>
<RadioGroup aria-label="응시 유형 선택" name="c1" appearance="card" columns="one">
<Radio value="written" description="선택지를 위아래로 읽히게 배치합니다.">필기 시험</Radio>
<Radio value="oral" description="설명이 긴 선택지에 적합합니다.">구술 시험</Radio>
</RadioGroup>
<RadioGroup aria-label="응시 장소 선택" name="c2" appearance="card" columns="two">
<Radio value="main" description="대부분의 학생이 배정됩니다.">본관 고사실</Radio>
<Radio value="lab" description="컴퓨터 기반 시험에 사용합니다.">전산 실습실</Radio>
<Radio value="remote" description="승인된 원격 응시자 전용입니다.">원격 응시</Radio>
<Radio value="makeup" description="추가 시험 일정이 있는 경우 선택합니다.">추가 시험</Radio>
</RadioGroup>
</div>
);
}상태
defaultValue와 비활성 옵션코드 보기tsx
import { Radio, RadioGroup } from "@olundot/ui";
export function RadioGroupStates() {
return (
<RadioGroup
aria-label="상태"
name="states"
appearance="card"
defaultValue="b"
>
<Radio value="a" description="기본 상태">선택 가능</Radio>
<Radio value="b" description="현재 선택">선택됨</Radio>
<Radio value="c" description="마감되었습니다." disabled>비활성</Radio>
</RadioGroup>
);
}