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 自動管理
  • フォーカスインジケーター
  • ローヴィングフォーカス対応