セレクト

hc-select はネイティブの <select> 要素をスタイルします。土台の要素はネイティブの挙動をすべて保ちます — キーボードナビゲーション、フォーム送信、モバイルでの OS ネイティブピッカー、スクリーンリーダーのセマンティクス — 閉じた状態だけが、HC フォームコントロールファミリーに合わせて完全に再スタイルされます。

別名: セレクトボックス、ドロップダウン、プルダウン。

ブラウザのベースライン

<select> をサポートするすべてのブラウザ(つまりすべてのブラウザ)で動きます。展開されたドロップダウンはブラウザネイティブのままなので、体験はユーザーのプラットフォームと一貫します。

モダンな後続 — appearance: base-select — により、いずれネイティブコントロールを手放さずに開いたピッカーもスタイルできるようになります。現状とオプトイン方法は下のネイティブ志向: 開いたピッカーのスタイリングを参照してください。

基本の HTML

<select class="hc-select" name="country" aria-label="Country">
  <option value="">Choose a country…</option>
  <option value="jp">Japan</option>
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
</select>

セレクトの上に見えるラベルとヘルパーテキストを付けるには hc-field と組み合わせてください。

バリアント

data-variant は、デフォルト以外の枠線色として success、warning、 error を受け付けます。デフォルト(省略)のバリアントは中立の枠線を使います。

<select class="hc-select" data-variant="error" aria-invalid="true">…</select>

支援技術にもフィールドが無効だと認識させるため、 data-variant="error" と一緒に aria-invalid="true" を設定してください。

サイズ

data-size は sm、md(デフォルト)、lg を受け付けます。サイズは hc-button / hc-input と同じ --hc-control-* スケールに従うため、 data-density="compact" は他のコントロールと一貫して縮めます。

<select class="hc-select" data-size="sm">…</select>
<select class="hc-select">…</select>
<select class="hc-select" data-size="lg">…</select>

無効化

コントロールがまったく操作可能であるべきでないときは、ネイティブの disabled 属性を使います。aria-disabled="true" は、コントロールがタブ順に残らなければならないまれなケース向けの、フォーカス可能な変種です。

<select class="hc-select" disabled>
  <option>Disabled select</option>
</select>

htmx での利用

hc-select はネイティブの <select> と同様にフォーム送信へ参加します。即時フィルタには change を待ち受けます:

<select class="hc-select"
        name="status"
        data-hx-get="/items"
        data-hx-trigger="change"
        data-hx-target="#items"
        data-hx-include="this">
  <option value="">Any status</option>
  <option value="open">Open</option>
  <option value="closed">Closed</option>
</select>

サーバサイドバリデーションのフィードバックには、 aria-invalid="true" つきのセレクトと、対になる hc-field のメッセージを返してください。

アクセシビリティ

セレクトには常にラベルを関連付けてください。最も簡単なパターンは、 <label for> つきの hc-field の中に置くことです。aria-label は見えるラベルがふさわしくない場合(ツールバー内のセレクトなど)にだけ使います。
最初の option が見えるデフォルトです — 何も事前選択されていないときは <option value="">Choose…</option> のようなプレースホルダーを使い、サーバ側で空の値と実際の選択を区別できるようにしてください。
ネイティブの <select> は Enter / Space / 矢印キーをすでに処理します。カスタムのキーボードハンドラを足さないでください — ブラウザ組み込みの挙動と衝突するだけです。
シェブロンは、hc-checkbox / hc-radio と同じ規約に倣い、ハードコードされた中立のストローク色の background-image で描かれます。純粋に装飾であり、スクリーンリーダーは読み上げません。

テーマ用トークン

component トークン(component.tokens.json):

トークンパス	用途
`select.height` / `padding-x`	サイズ(`--hc-control-*` 経由で密度を継承)。
`select.radius` / `font-size` / `bg` / `fg` / `border`	面、テキスト、平常時の枠線。
`select.focus-border`	フォーカス時の枠線。
`select.error-border` / `success-border` / `warning-border`	バリアントの枠線。
`select.disabled-bg`	無効時の背景。
`select.chevron-size`	シェブロンアイコンの寸法。
`select.sm.` / `lg.`	専用の sm / lg 上書き。

CSS 変数

生成される CSS 変数を表示

--hc-select-height | -padding-x | -radius | -font-size
--hc-select-bg | -fg | -border
--hc-select-focus-border | -error-border | -success-border | -warning-border
--hc-select-disabled-bg
--hc-select-chevron-size
--hc-select-sm-height | -sm-padding-x | -sm-font-size
--hc-select-lg-height | -lg-padding-x | -lg-font-size
--hc-color-focus-ring (inherited from data-color)

ネイティブ志向: 開いたピッカーのスタイリング

ネイティブの <select> は、キーボードナビゲーション、フォームへの参加、モバイルの OS ピッカー、スクリーンリーダーのセマンティクスを無料で与えてくれます — しかし歴史的に、開いたドロップダウンはスタイルできませんでした。カスタマイズ可能な <select> の取り組みがそれを変えます: 要素を appearance: base-select にオプトインすると、本物のネイティブコントロールを保ったまま、ピッカー — ::picker(select) 疑似要素と各 <option> を含む — をスタイルできます。ピッカーは (ポップオーバーのように)トップレイヤーに描画され、CSS アンカーポジショニングで配置できます。全容は Open UI の explainerを参照してください。

これは完全にプログレッシブです: appearance: base-select を理解しないブラウザは単に無視し、ネイティブのドロップダウンを保ちます。サポートするブラウザで今日カスタマイズ可能なパスが欲しければ、インスタンス単位でオプトインしてください:

<select class="hc-select" name="country" style="appearance: base-select">
  <button type="button">
    <selectedcontent></selectedcontent>
  </button>
  <option value="">Choose a country…</option>
  <option value="jp">Japan</option>
</select>

今すぐ、どこでも動く完全にスタイルされたドロップダウンが必要? hc-comboboxを使ってください — Light DOM に ARIA リストボックスを描画する JS の逃げ道です。HC はカスタマイズ可能 <select> の展開を追跡しており、機能が Baseline に達したら hc-select に第一級の宣言的オプトインを追加します。開いたピッカーのスタイリングだけが hc-combobox に手を伸ばす理由である場面を、ネイティブパスが置き換えられるように。