日本語ドキュメント / フォームと入力 / Checkbox / Radio
ブラウザ標準の入力部品の見た目だけを変えたものです。キーボード操作とフォームの動きは、そのまま残ります。
<label class="check"><input type="checkbox" checked>Send estimate</label> <label class="check"><input type="checkbox">Include travel</label> <label class="check"><input type="radio" name="kpay" checked>End of month</label> <label class="check"><input type="radio" name="kpay">End of next month</label>
.check{display:inline-flex;align-items:center;gap:var(--k-space-2);cursor:pointer;font-size:var(--k-text-base);font-family:var(--k-font);color:var(--k-ink)}
/* 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. */
.check input{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:1.5px solid var(--k-ink-3);border-radius:var(--k-radius-sm);background:var(--k-bg);display:grid;place-content:center;cursor:pointer;transition:background var(--k-dur-fast),border-color var(--k-dur-fast);margin:0;flex:none}
.check input::before{content:"";width:10px;height:10px;transform:scale(0);transition:transform var(--k-dur-fast);background:var(--k-bg);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}
.check input:hover:not(:disabled):not(:checked):not(:indeterminate){border-color:var(--k-ink-2)}
.check input:checked{background:var(--k-ink);border-color:var(--k-ink)}
.check input:checked::before{transform:scale(1)}
/* Mixed state for a parent of partly selected items: a bar instead of the check. */
.check input[type="checkbox"]:indeterminate{background:var(--k-ink);border-color:var(--k-ink)}
.check input[type="checkbox"]:indeterminate::before{clip-path:none;height:2px;transform:scale(1)}
.check input:focus-visible{box-shadow:var(--k-ring);outline:0}
.check input[aria-invalid="true"]:not(:checked){border-color:var(--k-danger)}
.check input:disabled{opacity:.5;cursor:not-allowed}
.check:has(input:disabled){color:var(--k-ink-3);cursor:not-allowed}
.check input[type="radio"]{border-radius:50%}
.check input[type="radio"]::before{clip-path:none;border-radius:50%;width:8px;height:8px}
.check input[type="radio"]:checked::before{background:var(--k-core)}
導入
npx @kajisho5/kataui add checkbox手動で入れる場合：
tokens.cssをページで一度だけ読み込む- CSS タブの中身を、自分のスタイルシートに貼る
- HTML タブの中身を、使いたい場所に貼る。
使いどころ
それぞれ独立した選択にはチェックボックス、組の中から1つだけ選ぶときはラジオを使います。
アクセシビリティ
ブラウザ標準のチェックボックスとラジオを、appearance:none で見た目だけ変え、<label> で包んでいます。Space で切り替え、ラジオの組の中は矢印キーで移ります。フォームの送信は今までどおりです。キーボードで選ぶと --k-ring の枠が出ます。チェックしていないときの枠線は、ライトで 4.83:1、ダークで 5.6:1 です。WCAG 1.4.11 が求める 3:1 を超えています（直す前は 1.65:1 と 2.29:1 でした）。チェックした状態、どちらでもない状態（スクリプトで input.indeterminate = true を付けます）、aria-invalid、押せない状態に見た目があります。押せない状態は薄く表示され、カーソルが禁止の形になり、切り替わりません。ラジオの組は name で決まります。同じフォームの中で重ならない name を組ごとに付けてください。見本を2回貼るときも同じです。日本語入力（IME）は関係ありません。スクリーンリーダーを手で確かめるまで Beta のままです。確認したのは Chromium だけです。
| キー | 動き |
|---|---|
| Tab | 次の部品へ移動 |
| Space | チェックを切り替える |
| ↑ / ↓ / ← / → | ラジオの組の中で選び直す |
英語版にだけある情報
静的チェックの結果・部品の構造（Anatomy）・読むトークン・使い方の例・関連する部品
この訳は、英語版の 2026-11-07 の内容をもとにしています。英語版の文が変わると、テストで知らせます。