Thinca Design System

Home / Components / Radio Button

Radio Button

排他的な選択肢から必ず一つを選ばせる入力パーツ。短いラベルを横並びで一覧したい、5 個以下の単一選択に使う。Plain と Panel の 2 バリアント。

プレビュー(動作デモ)

同じ name 属性のラジオはネイティブの排他制御で同時に 1 つしか選ばれません。ラベルやパネル全体クリックで切り替わります。

優先連絡先 (Panel バリアント)

選択中: main

興味度 (Plain バリアント)

選択中: mid

状態

Normal
Error
Disabled

バリアント

Plain と Panel の 2 種類。ラベルだけで意味が伝わる選択肢は Plain、補足説明やステータスラベルなど追加情報を伴う選択肢は Panel を使う。下のタブを切り替えるとプレビューとコードが連動します。

import { Radio, RadioGroup } from "@/components/Radio";

<RadioGroup>
  <Radio
    value="example"
    label="ラベルテキスト"
  />
</RadioGroup>

仕様

寸法・色

  • 円: 16×16px / radius full / 内側ドット 12×12px
  • ラベル: font 14px (medium) / 説明文: font 10px (regular)
  • ラベルとの gap: 8px / 上下 padding: 8px / Panel は左右 padding 8px
  • 並び方: 横並びを基本とし(RadioGroup に orientation="horizontal"、column 12px / row 8px の gap、 横幅が足りなければ flex-wrap で折り返し)、ラベルが長くなる場合のみ縦並び (gap 8px)に切り替える。SmartHR の Cluster gap={row:1, column:1.5} と整合
  • Normal: bg 白 / border #D1D5DB
  • Hover: bg rgba(31,41,55,0.08)
  • Selected: border #0066CC + 内側ドット #0066CC
  • Selected Panel: border #0066CC + bg rgba(0,102,204,0.16)
  • Disabled: bg #E5E7EB / text #D1D5DB

実装上の特徴

  • ネイティブ <input type="radio"> を視覚的に隠し、同名 (name) ラジオの**排他制御**はブラウザ標準に任せる
  • ラベル全体が <label> なのでテキストや panel 領域のどこをクリックしても選択
  • Panel の選択時スタイルは :has(.radio__input:checked) を利用

利用基準(SmartHR 準拠)

Thinca Design System は SmartHR の RadioButton ガイドラインに準拠する。 コンポーネントの性質上、選択肢が一覧しやすい場面で「フォーム入力としての排他選択」に 使うのが正しい用途。即時反映を伴うビュー切り替えには別コンポーネントを使う。

使うべき時

  • 排他的な 2〜5 個程度の選択肢から必ず一つ選ばせる場合(フォーム入力)
  • 選択結果は送信ボタン押下時に確定させる(即時反映ではない)
  • 「未選択」を許容せず、常にいずれかが選ばれる前提のフォーム
  • デフォルト値を 1 つ決めておき、初期状態でいずれかを選択済みにする
  • ラベルテキストは同程度の文量・行数に揃え、誤選択を防ぐ
  • 横幅に十分なスペースがあれば横並びを基本とする(縦長になるのを避ける)
  • ラベルが長くなる場合のみ縦並びに切り替える
  • 補足説明やステータスラベルなど追加情報を伴う選択肢は Panel バリアントを使う
  • <fieldset> + <legend> でグループ化し、何の選択肢なのかをスクリーンリーダーに伝える

使わない時

  • 複数選択を許容する → Checkbox を使用
  • 選択肢が 5 個を超える、またはラベルが長文 → Select / Combobox に逃がす
  • ビュー(表示モード / タブ / 一覧↔詳細)の切り替え → Tabs / Segmented Control を使用
  • 選択した瞬間に値を即時反映させる(submit ボタン無し) → Segmented Control / Switch を使用
  • 選択肢内にリンクや入力欄など操作可能な要素を入れる(クリック領域が競合する)
  • ラベルの文量・行数が選択肢間で極端にばらつく状態で並べる
  • テーブルセル内に直接配置する(行との関連付けが失われる)

Figma

Figma で Radio Button コンポーネントを開く ↗