7onicDESIGN SYSTEM

Radio

Radio는 여러 선택지에서 하나만 선택하는 폼 컨트롤입니다. RadioGroup으로 그룹화하여 사용합니다.

2
Weights
3
Sizes
Single
Selection
Radix
Base

Playground

미리보기
Dvertical
Size
Color
Weight
Items
Direction
Options
<RadioGroup
  defaultValue="option-1"
>
  <RadioGroup.Item
    value="option-1"
    label="Option 1"
  />
  <RadioGroup.Item
    value="option-2"
    label="Option 2"
  />
  <RadioGroup.Item
    value="option-3"
    label="Option 3"
  />
</RadioGroup>

Sizes

sm
서클14px
도트6px
폰트12px
Gap6px
클릭24px
default
서클16px
도트8px
폰트14px
Gap8px
클릭32px
lg
서클20px
도트10px
폰트16px
Gap10px
클릭36px

Features

With Field

Field 컴포넌트와 조합하면 disabled 상태를 자동으로 상속합니다.

<Field>
  <Field.Label>Notifications</Field.Label>
  <RadioGroup defaultValue="email">
    <RadioGroup.Item value="email" label="Email" />
    <RadioGroup.Item value="push" label="Push" />
    <RadioGroup.Item value="sms" label="SMS" />
  </RadioGroup>
</Field>
<Field>
  <Field.Label>Notifications</Field.Label>
  <RadioGroup defaultValue="email" orientation="horizontal">
    <RadioGroup.Item value="email" label="Email" />
    <RadioGroup.Item value="push" label="Push" />
    <RadioGroup.Item value="sms" label="SMS" />
  </RadioGroup>
</Field>

States

Default
Disabled
<RadioGroup> ... </RadioGroup>
<RadioGroup disabled> ... </RadioGroup>

API

Component Structure

RadioGroup— Radix RadioGroup
.ItemProps

Props

RadioGroup

valueundefined
string

제어 모드의 선택값

defaultValueundefined
string

비제어 모드의 초기값

onValueChangeundefined
(value: string) => void

선택 변경 시 콜백

size"default"
"sm" | "default" | "lg"

라디오 버튼 크기 (14/16/20px)

color"default"
"default" | "primary"

체크 시 보더와 도트 색상

weight"bold"
"thin" | "bold"

보더 두께 (thin: 1px / bold: 2px)

orientation"vertical"
"vertical" | "horizontal"

아이템 배치 방향

disabledundefined
boolean

비활성 상태

requiredundefined
boolean

필수 필드

nameundefined
string

폼 name 속성

looptrue
boolean

키보드 내비게이션 루프

RadioGroup.Item

value*
string

이 아이템의 값 (필수)

labelundefined
string

라디오 버튼 라벨 텍스트

disabledundefined
boolean

개별 비활성 상태

Anatomy

1
2
3
4
Option A
Option B
statechecked · unchecked
1
Root
RadioGroup 컨테이너
2
Circle
외부 링
3
Inner Dot
선택 시 표시
4
Label
옵션 텍스트

Best Practices

✓

권장

  • ✓하나만 선택하는 경우에 사용
  • ✓2~5개 선택지에 사용
  • ✓기본값을 설정
  • ✓각 항목에 명확한 라벨 붙이기
✕

지양

  • ✗다중 선택에는 Checkbox 사용
  • ✗선택지가 너무 많으면 Select 검토
  • ✗탭 전환에는 Segmented 사용
  • ✗라벨 없이 사용하지 않기

Accessibility

키보드 조작

↑ ↓이전/다음 아이템으로 이동
← →이전/다음 아이템으로 이동
Space선택
Tab그룹 간 이동

ARIA 속성

  • role="radiogroup" 자동 부여
  • aria-checked 자동 관리
  • 포커스 인디케이터
  • 로빙 포커스 지원