Textarea(テキストエリア)
複数行の自由テキストを入力させるコンポーネント。1行のText Inputとの使い分け、自動リサイズ設計、バリデーションとアクセシビリティの基準。
UX心理、UIデザイン原則、UIコンポーネント、リサーチ記事を横断して探せるUIXHEROのナレッジ一覧です。目的に合わせて絞り込みながら、設計や実装の判断材料を見つけられます。
複数行の自由テキストを入力させるコンポーネント。1行のText Inputとの使い分け、自動リサイズ設計、バリデーションとアクセシビリティの基準。
不可逆なアクション(削除・リセットなど)の実行前に、ユーザーに重大な結果を警告し最終確認を求めるダイアログ。
UIで最も重要なインタラクション要素であるボタンの、機能(階層)、状態、配置を一貫させるための設計基準。
単独あるいは複数の項目を「オン / オフ」するUI。RadioやToggle Switchとの使い分けの基準。
ユーザーの作業を中断し、緊急性の高い決定や情報の確認を求めるモーダルウィンドウ。使い所とアクセシビリティ(フォーカストラップ)の設計基準。
複数の選択肢から「必ず1つだけ」を選ぶ排他選択UI。CheckboxやSelectとの使い分けと、安全な初期状態の設計。
複数の選択肢から1つを選ぶUI。適切な使用場面と、Radioボタン群やNativeのSelectとの使い分けの判断基準。
画面の端(左右や下部)からスライドして現れるダイアログの一種。スマートフォンのメニューや、親画面の文脈を保ったまま詳細を表示する際に用いる。
大量のデータを比較・俯瞰するためのUI。文字揃え・罫線の引き算・スクロール耐性という「データグリッド」の基本設計。
同一画面内でパネル(コンテンツ)を切り替えるUI。ナビゲーションとの違いと、画面遷移させずに情報を整理するルールの解説。
ユーザーからの入力を受け付けるフォーム部品。ラベル、プレースホルダー、エラー処理の設計ルール。
ユーザーの操作を妨げずに、システムの処理結果を一過性で伝える軽量な通知UI。モーダル・アラートとの使い分け。