Radio group

ラジオボタンの組betaEnglish →

見えている選択肢から1つを選びます。点が中から大きくなるだけで、ほかは動きません。

見本

Billing cycle Monthly Yearly −20% Lifetime (sold out)

<fieldset style="border:0;padding:0;margin:0;display:grid;gap:var(--k-space-2)">
  <legend style="font-size:var(--k-text-sm);font-weight:550;margin-bottom:var(--k-space-0-5)">Billing cycle</legend>
  <label class="k-radio"><input type="radio" name="cycle" checked> Monthly</label>
  <label class="k-radio"><input type="radio" name="cycle"> Yearly <span style="color:var(--k-accent-ink);font-size:var(--k-text-sm);font-weight:600">−20%</span></label>
  <label class="k-radio"><input type="radio" name="cycle" disabled> Lifetime (sold out)</label>
</fieldset>

/* KATA Radio — native input, styled face. No JS. */
/* The unchecked border uses --k-ink-3: --k-border-strong measured 1.65:1 (light) and 2.29:1 (dark), below the 3:1 WCAG 1.4.11 asks of a control boundary. */
.k-radio{display:inline-flex;align-items:center;gap:var(--k-space-2);font-size:var(--k-text-base);cursor:pointer}
.k-radio input{appearance:none;-webkit-appearance:none;width:17px;height:17px;margin:0;border:1.5px solid var(--k-ink-3);border-radius:50%;background:var(--k-bg);display:grid;place-content:center;cursor:pointer;transition:border-color var(--k-dur-fast);flex:none}
.k-radio input::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--k-core);transform:scale(0);transition:transform var(--k-dur-fast) var(--k-ease)}
.k-radio input:hover:not(:disabled):not(:checked){border-color:var(--k-ink-2)}
.k-radio input:checked{border-color:var(--k-ink)}
.k-radio input:checked::after{transform:scale(1)}
.k-radio input:focus-visible{outline:none;box-shadow:var(--k-ring)}
.k-radio input[aria-invalid="true"]:not(:checked){border-color:var(--k-danger)}
.k-radio input:disabled{opacity:.5;cursor:not-allowed}
.k-radio:has(input:disabled){color:var(--k-ink-3);cursor:not-allowed}

導入

npx @kajisho5/kataui add radio

手動で入れる場合：

tokens.css をページで一度だけ読み込む
CSS タブの中身を、自分のスタイルシートに貼る
HTML タブの中身を、使いたい場所に貼る。

使いどころ

すべての選択肢を見せたいとき（2〜5個）に使います。もっと多いときは Select を使います。fieldset と legend でまとめます。

アクセシビリティ

ブラウザ標準のラジオを、legend の付いた fieldset に入れています。同じ組のラジオは name が同じなので、矢印キーで選び直せて、押せない選択肢は飛ばされます。見えている丸がそのまま本物の入力部品です。キーボードで選ぶと --k-ring の枠が出ます。チェックしていないときの枠線は、ライトで 4.83:1、ダークで 5.6:1 で、WCAG 1.4.11 の 3:1 を超えています（直す前は 1.65:1 と 2.29:1 でした）。マウスを乗せたとき、aria-invalid、押せない状態に見た目があります。押せない選択肢は薄く表示され、カーソルが禁止の形になり、選べません。同じフォームの中で重ならない name を組ごとに付けてください。見本を2回貼るときも同じです。日本語入力（IME）は関係ありません。スクリーンリーダーを手で確かめるまで Beta のままです。確認したのは Chromium だけです。

キー	動き
`Tab`	組の中の選ばれている項目へ移動
`↑ / ↓ / ← / →`	選び直す

英語版にだけある情報

静的チェックの結果・部品の構造（Anatomy）・読むトークン・使い方の例・関連する部品

英語版の Radio group ページで見る →

この訳は、英語版の 2026-11-07 の内容をもとにしています。英語版の文が変わると、テストで知らせます。