Components

ユーザー操作を受け付けるボタン

アイコンのみのボタン

テキストリンク

タブ切り替え

ナビゲーションのパンくずリスト

前後移動と現在位置を示すページネーション

テキスト入力フィールド

複数行のテキスト入力フィールド

数値入力フィールド

選択肢から値を選ぶセレクトボックス

チェックボックス

選択肢をカードで見せる複数選択

複数のチェックボックスをひとつの値として扱うグループ

オン・オフを切り替えるスイッチ

表示切り替え付きのパスワード入力フィールド

ラジオボタングループ

選択肢をカードで見せる単一選択

入力補完付きの選択フィールド

単一ノブのスライダー入力

ファイルアップロードフィールド

ラベルやエラー表示を付けるフォームラッパー

form actionパターンで送信を扱うフォームラッパー

折りたたみできるコンテンツパネル

フォールバック付きのプロフィール画像

ステータスやカテゴリを示すコンパクトなラベル

コンテンツをまとめるカード

インラインのコード表示

意味論を保ちつつ横スクロールにも対応するテーブル

見出し

ステータスに応じたメッセージを示すアラート

読み込み前のプレースホルダー

ローディングスピナー

一時的な通知メッセージのトースト

進捗バー

ダイアログ

画面端からスライドインするドロワー

モーダルダイアログ

要素に紐づくフローティングコンテンツ

ドロップダウンメニュー

ホバーで補足情報を出すツールチップ

ドロップダウン形式のリスト選択

子要素を縦または横に等間隔で並べるレイアウトプリミティブ

CSSグリッドで子要素を並べるレイアウトプリミティブ。列数固定、auto-fill / auto-fitに対応

区切り線

スクロール位置に連動するプログレスバー

k8ordo UIが提供するアイコン一覧