コンポーネントカタログ（Core）

• ダイアログ

  アクセシブルなモーダルダイアログ。フォーカスを閉じ込め、背景のスクロールを止め、Esc で閉じます。

  • Core
  • Dialog (Modal)

• 警告ダイアログ

  割り込みの確認モーダル。背景クリックでは閉じず、確定と取消をそれぞれ通知します。

  • Core
  • Alert & Message Dialog

• 確認ダイアログ橋渡し

  ブラウザ標準の確認ダイアログを、読み上げにも対応した警告ダイアログに置き換えます。

  • Core
  • Alert & Message Dialog
  • Rails / Turbo

• ドロワー

  画面の端からすべり込むモーダルパネル。開閉の状態を CSS へ渡し、退場のアニメを最後まで見せます。

  • Core
  • Dialog (Modal)

• コマンドパレット

  キーボードで呼び出すコマンドランチャー。絞り込みと上下移動をキーボードだけで完結できます。

  • Core
  • Dialog (Modal)
  • Combobox

• ドロップダウン

  ボタンで開閉する領域。開閉状態の読み上げ、Esc、外側クリックを引き受けます。

  • Core
  • Disclosure

• ポップオーバー

  トリガーで開閉する浮遊パネル。背景は操作できるまま、フォーカスの出入りと閉じ方だけを引き受けます。

  • Core

• ツールチップ

  ホバーとフォーカスで出る補足。表示と非表示に遅延を置き、カーソルを乗せても消えず、Esc で消せます。

  • Core
  • Tooltip

• ホバーカード

  ホバーとフォーカスで開く紹介カード。中のリンクへカーソルを移しても消えません。

  • Core

• メニューボタン

  コマンドを並べる本物のメニュー。矢印キーで項目を渡り歩けます。開閉だけの dropdown とは別物です。

  • Core
  • Menu Button

• コンテキストメニュー

  右クリックで開くメニュー。ポインタの位置に出て、キーボードでも呼び出せます。

  • Core
  • Menu

• メニューバー

  アプリのメニューバー。上の項目を横に渡り歩き、それぞれがメニューを開きます。頭文字での移動つき。

  • Core
  • Menubar

• ナビゲーションメニュー

  サイトのナビゲーション。リンクを並べたパネルを 1 つずつ開きます。アプリのメニューではありません。

  • Core
  • Disclosure

• あふれ項目の退避メニュー

  収まらないツールバーの項目を「その他」へ移します。幅が戻れば元の場所へ戻します。

  • Core
  • Menu Button

• ツールバー

  ボタンを並べた道具箱。Tab は 1 回だけ止まり、中は矢印キーで移動します。

  • Core
  • Toolbar

• コラプシブル

  1 か所をその場で開閉します。中身の高さを CSS へ渡すので、高さのアニメーションが書けます。

  • Core
  • Disclosure

• アコーディオン

  独立して開閉できる折りたたみセクション。見出しの間は矢印キーで行き来できます。

  • Core
  • Accordion

• 続きを読む

  長い本文を数行に畳み、続きを開けるようにします。収まっているときはボタンを出しません。

  • Core
  • Disclosure

• タブ

  タブの切り替え。矢印キーで移動すると、そのタブがすぐ選ばれます。

  • Core
  • Tabs

• パンくずリスト

  幅が足りないとき、途中の階層を「…」に畳むパンくずです。

  • Core
  • Breadcrumb

• ページネーション

  ページ送り。いま何ページ目かを伝え、端では前後のボタンを押せなくします。

  • Core

• スクロールスパイ

  読んでいる位置に合わせて目次の現在地を移します。スクロールのたびに計算しません。

  • Core

• ツリービュー

  折りたためる木構造。キーボードで移動、開閉、頭文字での検索ができます。

  • Core
  • Tree View

• ステッパー

  何段階かに分かれた手続きを進めます。飛ばして先へ行けないようにもできます。

  • Core

• ステップインジケータ

  手続きのどこまで来たかを示す表示。読むためのもので、押すためのものではありません。

  • Core

• チェックボックス

  ふつうのチェックボックスに、親子の連動と「一部だけ選択」の状態を足します。

  • Core
  • Checkbox

• ラジオグループ

  自作の見た目のラジオボタン。矢印キーで選び、Tab は 1 回だけ止まります。

  • Core
  • Radio Group

• スイッチ

  オンとオフを切り替えるスイッチ。押した状態が読み上げに伝わります。

  • Core
  • Switch

• トグルグループ

  押した状態を持つボタンの集まり。1 つだけ選ぶ形にも、いくつでも選べる形にもできます。

  • Core
  • Toolbar

• レーティング

  星による評価。矢印キーで増減し、端で止まります。選び直しも取り消しもできます。

  • Core
  • Radio Group

• リストボックス

  選択肢を開いて 1 つ選ぶセレクト。フォーカスはボタンに残ったまま候補を辿れます。

  • Core
  • Listbox

• コンボボックス

  打ち込むと候補が絞り込まれる入力欄。キーボードだけで選べます。

  • Core
  • Combobox

• 複数選択

  候補を絞り込みながら複数選ぶ入力。選んだものは消せるタグになります。

  • Core
  • Combobox

• OTP 入力

  確認コードを 1 桁ずつ入れる欄。貼り付けも自動入力も、桁ごとに振り分けます。

  • Core

• 入力マスク

  決めた形に沿って入力を整えます。カーソルの位置は動きません。

  • Core

• 数値入力

  数を増減する入力欄。刻み幅で上下し、範囲の外へは出ません。

  • Core
  • Spinbutton

• 金額入力

  打ちながら桁区切りが付く金額の入力欄。送信されるのは区切りの無い数値です。

  • Core

• カラーピッカー

  色相、彩度、明度を別々のスライダーで選ぶ色選択。16 進の入力欄と双方向につながります。

  • Core

• スライダー

  つまみ 1 つのスライダー。キーボードでもドラッグでも動かせます。

  • Core
  • Slider

• レンジスライダー

  下限と上限を 2 つのつまみで選ぶスライダー。互いを追い越しません。

  • Core
  • Slider (Multi-Thumb)

• 自動拡張テキストエリア

  入力に合わせて textarea が伸びます。伸びる範囲は行数で決められます。

  • Core

• タグ入力

  打った言葉をタグにします。Enter か区切り文字で確定し、削除もできます。

  • Core

• カレンダー

  キーボードで動かせる月のカレンダー。日付の並びと月またぎを引き受けます。

  • Core
  • Date Picker Dialog

• 期間選択カレンダー

  開始と終了の 2 回で期間を選ぶカレンダー。選んでいる途中の範囲も見えます。

  • Core
  • Date Picker Dialog

• 時刻選択

  時、分、午前午後を別々に動かす時刻入力。送られる値はいつも 24 時間表記です。

  • Core
  • Spinbutton

• 相対時間表示

  時刻を「3 分前」のように表示し、時間が経つと自分で書き換わります。

  • Core

• ローカル時刻表示

  サーバが出した UTC の時刻を、閲覧者の時間帯と言語で表示します。

  • Core

• タイマー / カウントダウン

  目標時刻までの残りを日、時、分、秒に分けて刻みます。一時停止と再開ができます。

  • Core

• フォームフィールド

  入力欄と、その説明やエラーを結びつけます。読み上げに正しい順で届きます。

  • Core

• フォームバリデーション

  ブラウザ標準の検証を、いつ出すかまで含めて整えます。送信も止め、最初のエラーへ案内します。

  • Core

• 文字数カウンタ

  残りの文字数を出し、上限が近いことと超えたことを伝えます。読み上げは打ち終わってから。

  • Core

• パスワード表示切替

  パスワードの表示と非表示を切り替えます。カーソルの位置はそのままです。

  • Core

• パスワード強度メーター

  パスワードの強さを目安として示します。メーターと文言の両方で伝えます。

  • Core
  • Meter

• インライン編集

  その場で書き換える編集。クリックか F2 で始め、Enter で保存、Esc で取り消します。

  • Core

• 依存フィールド

  ほかの入力の値に応じて、フォームの一部を出したり引っ込めたりします。

  • Core

• 動的フィールド行

  明細行を足したり消したりします。Rails の入れ子フォームの作法どおりに送信されます。

  • Core
  • Rails / Turbo

• ファイルドロップゾーン

  クリック、キーボード、ドラッグの 3 通りでファイルを選べます。画像は先に見られます。

  • Core

• ダイレクトアップロードの進捗

  アップロードの進み具合をファイルごとに出し、終了と失敗を読み上げます。

  • Core
  • Rails / Turbo

• 自動送信フォーム

  入力が落ち着いたらフォームを送信します。検索や絞り込みに送信ボタンが要らなくなります。

  • Core
  • Rails / Turbo

• 二重送信防止

  送信ボタンを一度だけ押せるようにします。二重送信を防ぎ、終われば元へ戻ります。

  • Core

• 編集中離脱ガード

  フォームの変更を覚えておき、保存せずに離れようとしたら引き止めます。

  • Core
  • Rails / Turbo

• 入力の永続化

  書きかけのフォームを保存し、戻ってきたときに書き戻します。

  • Core
  • Rails / Turbo

• 楽観的 UI

  押した瞬間に見た目を進め、失敗したぶんだけ正確に戻します。

  • Core
  • Rails / Turbo

• アスペクト比

  決めた縦横比を CSS へ渡します。箱の比率を保つのは利用側のスタイルです。

  • Core

• セパレータ

  区切り線に意味を与えます。値を持ってキーボードで動かせる形にもできます。

  • Core

• アバター

  ユーザーの画像を表示し、読み込めなかったら用意しておいた代わりに切り替えます。

  • Core

• リサイザブル

  境界をドラッグして領域の広さを変えます。キーボードでも動かせます。

  • Core
  • Window Splitter

• メーソンリー

  高さの違うカードを、いちばん低い列へ次々に積みます。読む順番は変わりません。

  • Core

• サイドバー

  画面幅で姿を変えるサイドバー。広い画面では畳めるレール、狭い画面ではモーダルのパネルになります。

  • Core
  • Dialog (Modal)

• スクロール領域

  スクロールする枠にキーボードで入れるようにし、端まで来たかを CSS へ伝えます。

  • Core

• カルーセル

  止められる自動再生つきのスライドショー。スライドを選ぶボタンはキーボードで渡り歩けます。

  • Core
  • Carousel

• データグリッド

  表に列の並べ替え、行の選択、セル間のキーボード移動を足します。

  • Core
  • Grid

• 一括選択バー

  行のチェックと一括操作バーを連動させ、選んだ件数を読み上げます。

  • Core

• フィルター

  選んだ条件で一覧を絞り込みます。条件の切り替え方はチェックでもボタンでも構いません。

  • Core

• 単一リストの並べ替え

  並べ替えを、キーボードとスクリーンリーダーでも同じようにできるようにします。

  • Core

• オーバーフロー表示

  まだ先に続きがあることを伝えます。端の影や矢印を CSS で描けます。

  • Core

• スクロール表示切替

  スクロールの量や向きに応じて要素を出し入れします。「トップへ戻る」や隠れるヘッダに使えます。

  • Core

• 追従状態検知

  貼りついたヘッダが実際に貼りついた瞬間を教えます。影を出す合図に使えます。

  • Core

• 最下部追従

  新しい行が届くと下へ追従します。読み返している最中は追いかけません。

  • Core

• スクロール位置の保持

  枠の中のスクロール位置を覚えておき、ページを移動して戻っても同じ場所を見せます。

  • Core
  • Rails / Turbo

• 読了プログレス

  記事をどこまで読んだかを CSS へ渡します。進捗バーは CSS だけで書けます。

  • Core

• スマート追従ヘッダ

  下へ読むとヘッダが引っ込み、上へ戻すと現れます。キーボードで入ったときは必ず出てきます。

  • Core

• カウントアップ

  マークアップに書かれた最終値まで、数値をアニメーションで増やしていく。定番は「見えたら開始」。

  • Core

• スピナー

  読み込み中の表示を出し入れします。始まりと終わりは読み上げにも伝えます。

  • Core

• スケルトン切り替え制御

  読み込み中の仮表示を、届いた中身と入れ替えます。一瞬で届いてもちらつきません。

  • Core

• プログレスバー

  進み具合を伝えます。割合は CSS から読めるので、バーの塗りは自由に書けます。

  • Core

• メーター

  ディスク使用量やバッテリーのような「いまの量」を示すメーター。しきい値で段階に分けます。

  • Core
  • Meter

• フレーム読込状態

  Turbo フレームの読み込み中に、待ち表示を出して二度押しを防ぎます。

  • Core
  • Rails / Turbo

• 空状態の監視

  リストが空のときだけ「まだありません」を出し、1 件でも入れば引っ込めます。

  • Core

• アナウンサー

  画面の変化をスクリーンリーダーへ伝える共通の窓口。ページに 1 つ置けば全部品が使えます。

  • Core

• トースト

  重ねて出せる通知。読み上げに届き、カーソルを乗せている間は消えません。

  • Core

• フラッシュ橋渡し

  Rails の flash を、読み上げに届いて自動で消える通知にします。

  • Core
  • Rails / Turbo

• ネットワークステータス

  回線が切れたことと戻ったことを知らせます。切れたときは強く、戻ったときは静かに伝えます。

  • Core

• ディスミッシブル

  お知らせやバナーを閉じます。閉じるボタンごと消えても、フォーカスが迷子になりません。

  • Core

• クリップボード

  テキストをコピーし、成否を目と耳の両方へ伝えます。

  • Core

• テーマ切替

  ライト、ダーク、端末に合わせるの 3 択を覚え、ページ全体へ反映します。

  • Core

• 挿入要素の強調

  差し込まれたばかりの要素に一瞬だけ印を付けます。光らせ方は CSS で自由です。

  • Core

• 無操作検知

  しばらく操作がなければ知らせます。先に予告を出して、戻ってきたことも伝えます。

  • Core

• ビューポート侵入で遅延ロード

  Turbo フレームの読み込みを、近づくまで待たせます。キーボードで辿り着いたときも読み込みます。

  • Core
  • Rails / Turbo

• プレビュー中の揮発要素ガード

  Turbo が一瞬だけ見せる古い画面の間、変わりやすい値を隠します。

  • Core
  • Rails / Turbo

• キャッシュ前リセット

  戻ったときに操作の途中が残らないよう、一時的な状態をページごと片付けます。

  • Core
  • Rails / Turbo

• アンカー配置ユーティリティ

  浮いた要素を基準の要素の横につけ、画面の端では自動で向きを変えて収めます。

  • Core

• ロービングタブインデックス

  並んだ項目を Tab の 1 停止にまとめ、その中は矢印キーで移動します。

  • Core

• ポインタドラッグ

  ドラッグの土台。始まり、移動、終わり、取り消しを揃え、キーボードでも同じことができます。

  • Core

• ビューポート交差

  要素が画面に入ったこと出たことを、イベントと CSS の値にして渡す土台です。

  • Core

• フォーカス管理ユーティリティ

  任意の領域にフォーカスの境界を作ります。Tab が中を巡り、抜けたら元へ戻ります。

  • Core

• 要素の移送

  要素をページの別の場所へ移します。切り取られる枠や重なりの制約から抜け出せます。

  • Core

• 共有トランジション基盤

  出入りのアニメーションの土台。終わりを見届けてから隠します。

  • Core

このカテゴリのデモは、この Playground の Rails 側で Action Cable を有効にして動いています。アダプタは async（Redis 不要 — 単一 puma プロセスなのでタブ間の broadcast がそのまま成立）、マウントは Rails 既定の /cable、接続は匿名です。サーバ側は受けた信号を部屋へ流し直すだけの薄いチャンネル 3 本（TypingChannel / PresenceChannel / LikesChannel）で、ページ共有の WebSocket 1 本を setCableConsumer で各コントローラに渡しています。

• 入力中インジケータ

  「〇〇さんが入力中…」を、ほとんど自前の JavaScript なしで出します。

  • Core

• 在室表示

  いま誰がこのページを見ているかの一覧。サーバは誰の状態も持ちません。

  • Core

• ライブカウンタ

  開いているすべてのタブで同時に動くカウンタ。数を持つのはサーバです。

  • Core