UIコンポーネント集
196個のコンポーネント — 1 / 9 ページ
フォーム・入力
テキスト入力
Text Input
- •名前・メール・URLなど単行テキストの入力
- •フォームの最基本要素
フォーム・入力
セレクトボックス
Select / Dropdown
- •決まった選択肢から1つを選ぶ
- •ラジオボタンの選択肢が5個以上のとき
フォーム・入力
チェックボックス
Checkbox
- •複数の項目を同時に選択する
- •同意チェック・フィルタリング
フォーム・入力
ラジオボタン
Radio Button
- •排他的な選択肢から1つだけ選ぶ
- •支払方法・配送方法など
フォーム・入力
トグルスイッチ
Toggle Switch
- •ON/OFFの二値設定
- •通知・ダークモード・機能の有効化
0100
フォーム・入力
スライダー
Slider / Range Input
- •数値範囲の直感的な調整（音量・価格フィルタなど）
🔍
フォーム・入力
検索フィールド
Search Field
- •コンテンツのキーワード検索
- •インクリメンタルサーチUI
1
フォーム・入力
数値ステッパー
Number Stepper
- •数量・人数など整数値の増減
- •ECカートの個数・予約人数
ReactTypeScript
フォーム・入力
タグ入力
Tag Input
- •複数キーワードの自由入力・管理
- •スキル・ラベル・タグの追加と削除
フォーム・入力
OTP入力
OTP / PIN Input
- •SMS認証コード・PINコードの入力
- •各桁が独立したフォームで入力しやすい
フォーム・入力
オートコンプリート
Autocomplete
- •入力に応じて候補を提示し選択を補助する
- •検索・住所・タグ入力に使用
¥20k¥80k
フォーム・入力
デュアルレンジ
Dual Range Slider
- •価格帯・期間など最小〜最大の範囲指定
- •フィルタリングUIの定番
アクセントカラー
#C96442
フォーム・入力
カラーピッカー
Color Picker
- •色の選択入力
- •テーマカスタマイズ・ペイントツール
⚠有効なメールアドレスを入力してください
フォーム・入力
フォームバリデーション
Form Validation
- •入力エラーをフィールド直下にインライン表示
- •送信前にリアルタイムでフィードバック
ボタン・アクション
プライマリボタン
Primary Button
- •画面で最も重要な1つのアクション（送信・保存・次へ）
ボタン・アクション
セカンダリボタン
Secondary Button
- •主アクションに対して補助的な操作（キャンセル・戻る）
ボタン・アクション
デストラクティブボタン
Destructive Button
- •削除・退会など元に戻せない危険な操作
ボタン・アクション
ゴーストボタン
Ghost Button
- •背景が複雑な場所での使用・重要度の低い補助アクション
ボタン・アクション
アイコンボタン
Icon Button
- •ツールバー・スペースが限られた場所でのアクション
- •aria-labelで意味を補う
ボタン・アクション
ローディングボタン
Loading Button
- •非同期処理中にボタンを無効化し処理中を示す
ボタン・アクション
FABボタン
Floating Action Button
- •画面上の最主要アクションをフローティングで配置（新規作成など）
ボタン・アクション
ボタングループ
Segmented Control
- •排他的なビュー切り替え（リスト/グリッド・日/週/月）
npm install nextボタン・アクション
コピーボタン
Copy Button
- •コードスニペット・URLなどをクリップボードにコピー
- •押下後に完了フィードバックを表示
ボタン・アクション
いいねボタン
Like / Heart Button
- •コンテンツへの感情表現・お気に入り登録