값 모델
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>
  );
}