日本語ドキュメント / フォームと入力 / Select

Select

選択欄betaEnglish →

ブラウザ標準の select を、KATA のトークンで見た目だけ整えたものです。端末の選択画面とキーボード操作は、そのまま使えます。

見本

この部品は Input も使います。その CSS も一緒に読み込んでください。

<div class="k-select-examples">
  <div class="field"><label>Plan
    <span class="k-select"><select><option>Starter</option><option selected>Studio</option><option>Scale</option></select><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span>
  </label></div>
  <div class="field"><label>Region
    <span class="k-select"><select><option selected>Tokyo</option><option>Osaka</option><option>Remote</option></select><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span>
  </label></div>
  <div class="field"><label>Availability<span class="k-select"><select disabled><option>Locked</option></select><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span></label></div>
</div>
/* KATA Select — native <select>, token-styled. No JS. */
.k-select{position:relative;display:inline-block}
/* Logical padding keeps the chevron's room on the inline end, so RTL text does not run under it. */
.k-select select{appearance:none;-webkit-appearance:none;height:38px;max-width:100%;padding-block:0;padding-inline:var(--k-space-3) var(--k-space-8);border:1px solid var(--k-line);border-radius:var(--k-radius);background:var(--k-bg);color:var(--k-ink);font-family:var(--k-font);font-size:var(--k-text-base);cursor:pointer;transition:border-color var(--k-dur-fast)}
.k-select select:hover:not(:disabled){border-color:var(--k-border-strong)}
.k-select select:focus-visible{outline:none;border-color:var(--k-ink);box-shadow:var(--k-ring)}
.k-select select:disabled{opacity:.5;cursor:not-allowed}
/* aria-invalid is the accessible error state, as in Input and Textarea. */
.k-select select[aria-invalid="true"]{border-color:var(--k-danger)}
.k-select select[aria-invalid="true"]:focus-visible{border-color:var(--k-danger);box-shadow:var(--k-ring)}
.k-select svg{position:absolute;inset-inline-end:var(--k-space-2);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--k-ink-3)}
.k-select[data-size="sm"] select{height:32px;font-size:var(--k-text-sm)}
.k-select[data-size="lg"] select{height:44px;font-size:var(--k-text-md)}
/* iOS: fields under 16px make Safari zoom the page on focus — 16px on small screens (the mold, KATA.md) */
@media (max-width:640px){.k-select select,.k-select[data-size="sm"] select,.k-select[data-size="lg"] select{font-size:var(--k-text-lg)}}

.k-select-examples{display:flex;gap:var(--k-space-3);flex-wrap:wrap;align-items:flex-end}
/* The native option list follows the KATA theme. Scoped to the select: the part no longer sets color-scheme on :root. */
.k-select select{color-scheme:light}
[data-theme="dark"] .k-select select{color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme]) .k-select select{color-scheme:dark}}

導入

npx @kajisho5/kataui add select

手動で入れる場合：

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

使いどころ

選択肢が4つ以上あり、ブラウザ標準の部品で足りるときに使います。下向きの矢印は飾りで、動きは select 自体が受け持ちます。

アクセシビリティ

本物の <select> を <label> で包んでいます。キーボード、スマホの選択画面、スクリーンリーダーは、端末そのものの動きを使います。キーボードで選ぶと、:focus-visible で --k-ring の枠が出ます。矢印キーで値が変わります。aria-invalid="true" で危険を示す色の枠線になります。押せない（disabled）状態は薄く表示され、カーソルが禁止の形になり、マウスを乗せても変わらず、Tab で飛ばされます。下向きの矢印は aria-hidden で読み上げから外し、その場所を行の終わり側に取っているので、右から左の表示（RTL）でも文字が矢印の下に入りません。選んだ文字はライト・ダークとも 16:1 以上です。幅 640px 未満では文字を 16px 以上にして、iOS の Safari が勝手に拡大しないようにしています。ブラウザ標準の選択肢の一覧は、select にだけ color-scheme を付けることで KATA のテーマに合わせています。文字を入力しないので、日本語入力（IME）は関係ありません。スクリーンリーダーを手で確かめるまで Beta のままです。確認したのは Chromium だけです。

キー動き
Tab選択欄へ移動
↑ / ↓値を変える
Alt + ↓一覧を開く（端末による）

英語版にだけある情報

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

英語版の Select ページで見る →

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

    Highlight a part to see it live.