コンポーネント

各コンポーネントは、HTML の例・バリアントとサイズ・状態・テーマ用トークン・アクセシビリティノートつきでドキュメント化されています。下のカテゴリから探すか、キッチンシンクで全コンポーネントを 1 ページでライブ表示できます。

Actions

バリアント・サイズ・htmx フレンドリーなリクエスト状態を備えたセマンティックなボタンコンポーネント。

隣接するボタンをセグメント化されたひとかたまりへ視覚的に連結。

2 状態トグルボタンの連結された列 — 排他(ラジオ)または複数選択 — ロービングタブインデックスのキーボード対応つき。軽い CSS スキン + installToggleGroup。

関連するコントロールを一貫した間隔と任意のセパレータで横方向にグルーピング。

コマンドパレット(⌘K ランチャー)— ダイアログ内の入力で絞り込むアクションのリスト。グループ化された結果とキーボードナビゲーション。WAI-ARIA コンボボックスパターン。

ネイティブの <kbd> 要素の上に構築された、スタイル済みのキーボードキーとショートカット。

Forms

ラベル・コントロール・ヘルプ/エラーメッセージを、バリデーションを認識する 1 つの単位にまとめます。

標準の input・select・textarea 要素に適用するセマンティックな入力クラス。

入力欄と前後のアドオンを 1 つの面の上に合成。

autocomplete=one-time-code つきの単一のアクセシブルな <input> の上に構築され、installInputOtp が視覚的なスロットとして描画する、分割型ワンタイムコード入力。

閉じた状態を完全にスタイルし、ドロップダウンには OS / ブラウザのピッカーを使うネイティブの <select> — 純 CSS、JavaScript なし。

WAI-ARIA 1.2 コンボボックスパターン、ネイティブ popover、CSS Anchor Positioning の上に構築された、入力で絞り込むアクセシブルな単一選択。

タグ入力つきの複数選択コンボボックス — 入力で絞り込み、クリックでトグル、Backspace で最後のタグを削除。popover + アンカーポジショニングの上に構築。

ネイティブの input[type=checkbox] を、ネイティブのセマンティクス・キーボード挙動・フォーム参加を保ったままスタイルするセマンティックなチェックボックスクラス。

ネイティブの input[type=radio] を、ネイティブのグルーピング・キーボード挙動・フォーム参加を保ったままスタイルするセマンティックなラジオクラス。

iOS 風トグルとしてスタイルされたネイティブのチェックボックス。role="switch" で正しいスクリーンリーダーセマンティクス。純 CSS、JavaScript なし。

ブラウザ間で一貫したクロームにスタイルされたネイティブの input[type=range]。キーボード・フォーム統合・アクセシビリティはブラウザから、小さなビヘイビアが WebKit の塗りを同期。

ネイティブなラジオグループとしての星評価 — フォームと一緒にシリアライズされ、矢印キーのナビゲーションはプラットフォームが提供、チェック位置までのフィルは純 CSS。

重ねた 2 つのネイティブ <input type="range"> から作るデュアルサムの最小 / 最大レンジ。つまみ同士をクランプしフィルを描く小さなビヘイビアつき。ネイティブにシリアライズ。

HC フォームコントロールファミリーに合わせてスタイルされたネイティブの日付 / 時刻入力。OS ネイティブのカレンダーポップアップは保たれます。

installCalendar が描画するスタイル済みの月グリッド日付ピッカー。WAI-ARIA デートピッカーグリッドパターンとフルキーボードナビゲーション。Intl でローカライズ。

ネイティブの file input の上のドラッグ&ドロップ面 — クリックとキーボードは 100% ネイティブのまま、ドロップはファイルを代入して普通の change イベントを発火します。

ファイルカード — アイコン、名前、サイズ、削除ボタン — と hc-attachments リストラッパー、進捗行が現れるアップロード中状態、エラー状態。純 CSS。

サイトルートから現在のページまでのナビゲーションの道筋 — 純 CSS、セマンティック HTML、JavaScript なし。

「このページ内」ジャンプリスト — 純 CSS の hc-toc と、表示中のセクションに印を付ける任意の data-hc-spy スクロールスパイ。

現在ページの強調と無効化された前 / 次を備えたセマンティックなページリンク。

ゼロ JavaScript のステップインジケーター — マーカーを含むすべての状態をサーバが描画。ナビゲーションはステップのフォームの仕事です。

WAI-ARIA APG パターンに従うアクセシブルなタブパネル。ブラウザのページ内検索へのプログレッシブエンハンスメントと、任意の URL ルーティング変種つき。

ネイティブの popover 属性と CSS Anchor Positioning の上に構築された、WAI-ARIA APG メニューパターンに従うアクセシブルなドロップダウンメニュー。

hc-menu の上に構築された、デスクトップアプリケーションのメニューバー(File / Edit / …)。

コンテンツパネル(メガメニュー)を開けるトップレベルのサイトナビゲーション。

hc-menu の面の上に構築された右クリック / キーボードのコンテキストメニュー。installContextMenu がポインタ位置で開きます。WAI-ARIA メニューセマンティクス。

セマンティックな入れ子リストの上の ARIA ツリービュー — roles と APG キーボードモデルはビヘイビアが適用。枝の状態は aria-expanded に、遅延サブツリーはサーバレンダリングされた HTML として届きます。

Overlays

標準の <dialog> 要素への最小限のスタイリング。モーダルフローは showModal()、非モーダルは show() を使います。

ネイティブの <dialog> 要素の上に構築されたスライドインのサイドパネル。端への配置と、@starting-style による CSS のみのスライドアニメーション。

標準の popover 属性の上に構築された軽量なフローティングパネル。

構造化されたコンテンツを持つ、より豊かなツールチップ。ユーザーはカーソルをカードへ移動でき、中のリンクをクリックできます。

ホバーまたはフォーカスで現れる短く一時的なテキストラベル。ネイティブの popover 属性と CSS Anchor Positioning の上に構築。

Data display

ホバー可能な行と控えめなヘッダー帯を持つセマンティックなデータテーブル。

行番号ガター、行ごとの状態装飾、unified diff モードを備えた読み取り専用の等幅コード面。

インタラクティブな Excel ライクのデータグリッド — 多段スティッキーヘッダー、固定列、行選択、キーボードによるセルナビゲーション、インライン編集 — セマンティックなテーブルと position:sticky の上に構築。ページングされたデータ向けで、クライアントサイドのグリッドフレームワークではありません。

任意のヘッダー・ボディ・フッターのパーツを持つ汎用コンテナ。

汎用のリスト / オプション行プリミティブ — メディア、コンテンツ、アクション。

円形または角丸のユーザーアバター — 写真があるときは <img>、なければイニシャルの <span>。CSS のみ。壊れた画像をイニシャルのフォールバックに差し替える任意のビヘイビアつき。

バリアントカラーつきの小さなインラインステータスインジケーター。

事実や属性のための控えめなピル型トークン — 権限、タグ、適用中のフィルタ — 折り返すリストコンテナつき。

セクションやグループの間の細い区切り線。水平 / 垂直の向きを持つネイティブの <hr> 要素の上に構築。純 CSS、JavaScript なし。

ネイティブの <details> / <summary> とモダンな name 属性だけで構築されたコラプシブルなセクショングループ — JavaScript 不要。

ネイティブの details / summary の上に構築された単体の表示 / 非表示ディスクロージャ。

数値系列から描かれる単語サイズのインライントレンド線 — CSP セーフ、チャートライブラリ依存なし。

縦のアクティビティ / 監査タイムライン — マーカーのレール、コネクタ線、ステータス色のマーカー。素のリスト、純 CSS、JavaScript なし。

会話のトランスクリプト — 時系列の role="log" リージョンに、ロールで色分けされたバブル、CSS のみのストリーミングキャレット、最下部への追従スクロールビヘイビア。

Feedback

バリアントカラーつきのブロックレベルの通知 / ステータスメッセージ。

一時的でイベント駆動の通知 — クライアントコードまたは HX-Trigger ヘッダーから発火。位置、スタッキング、スワイプで解散。

ブラウザ間で一貫したクロームにスタイルされたネイティブの <progress> 要素。確定 / 不確定の両状態をサポート。純 CSS、JavaScript なし。

一貫したクロスブラウザの見た目でスタイルされたネイティブ <meter> 要素 — ブラウザの optimum / suboptimum / critical 領域をステータストークンに対応づけ。純 CSS、JavaScript なし。

ビジー / 保留状態のための最小限の CSS のみのローディングインジケーター。

pulse / wave アニメーション、テーマ適応の面、prefers-reduced-motion 対応を備えた読み込みプレースホルダーブロック。純 CSS、JavaScript なし。

「結果なし」「まだ何もない」状態のための中央寄せブロック。

Layout

画像、動画、埋め込みのための固定アスペクト比のボックス。

標準の CSS Scrollbars モジュールによる、細くテーマに沿ったスクロールバーつきのスクロール領域。純 CSS、JavaScript なし。

業務アプリのためのフルビューポートのアプリケーションシェル — 常設サイドバー、ヘッダー、メイン、任意の aside とフッター — CSS Grid の上に構築。レイアウトは純 CSS で、唯一の JavaScript はアクセシブルなモバイルナビゲーションのオーバーレイです。

ドラッグ可能でキーボードアクセシブルなハンドルによるリサイズ可能パネル。WAI-ARIA Window Splitter パターンに準拠。installSplitter で駆動。

ネイティブスクロールで駆動するスクロールスナップのカルーセル。任意で自動再生つき。