Input (入力)

    Input コンポーネントを使用して、文字列、さまざまなコンテキストに適した数値、日付、その他の値 (メールやパスワードなど) のユーザー データを収集します。Input は、Ignite UI for Angular Input Group コンポーネントと視覚的に同じものです。

    Input のデモ

    タイプ

    Sketch と Adobe XD の Input コンポーネントは、simple、ヘルパー テキスト付きの hint、searchbar、の 3 つのオプションからプリセットを選択できます。Figma では、hint (ブール値プロパティ) の有無にかかわらず単純な入力と、searchbar のどちらかを選択できます。

    `simple` `hint` `searchbar`

    Sketch と Adobe XD の hint と simple プリセットでは、3 つの異なるタイプから選択できます: より風通しの良い外観の line スタイル、無地の背景でより構造化された認識の border スタイル、および入力を鮮やかな画像の上に配置して、コンテンツの読みやすさを向上させる場合に最も適した boxed スタイルです。Line スタイルは非推奨であるため、Figma では border と box のタイプのみを使用できます。

    操作状態

    Sketch と Adobe XD では、これらの各プリセットを Enabled (有効) または Disabled (無効) の状態で挿入できます。Figma では、Input はデフォルトで Enabled 状態にあり、右側のプロパティ パネルから Disabled 状態に切り替えることができます。

    `enabled` `disabled`

    状態

    Input コンポーネントは、ユーザーの操作にあわせてさまざまな状態を経ます。Idle (アイドル状態): コンテンツの代わりにプレースホルダーを表示します。Hover (ホーバー状態) は、ユーザーがカーソルを合わせたときに入力がアクティブであることを示します。Filled (塗りつぶし状態): ユーザーがコンテンツを入力し、入力から移動した後に表示されます。Focused (フォーカス状態) は、ユーザーがアクティブに入力を行っていることを視覚的に示します。

    `idle` `hover` `filled` `focused`

    経験豊富なデザイナーは、ユーザー入力を制限して無効な状態を防止するために、検証スタイルを使用します。検証スタイルは、Input で Success (成功)、Warn (警告)、Error (エラー) を表示する洗練されたデザインを提供します。

    `success` `warn` `error`

    Sketch では、状態と検証状態は Symbol Overrides で達成されますが、Figma では、右側のプロパティ パネルの 「State」 プロパティを使用してそれらを切り替えることができます。Adobe XD では Component States パラダイムを使用して簡単に状態を切り替えることができます。

    レイアウト

    Input には特定の場合に入力 (@email.com サフィックス) を軽減するテキストの Prefix/Suffix やアイコンをサポートします。これによりキーストロークを減らし、予期されるコンテンツを明確にすることができます。Figma では、Prefix または Suffix を削除するには、プロパティ パネルでオンまたはオフに切り替えます。Sketch で Prefix または Suffix を削除するには、オーバーライドを ~No Symbol に設定するだけで、スマート レイアウト ルールがそれに応じて入力を調整します。Adobe XD では、不要な Prefix または Suffix レイヤーを削除しても同じことができ、Stack はそれに応じてレイアウトを調整します。

    コンテンツ タイプ

    各 Input コンポーネントには、テキスト、電子メール、パスワード、電話番号、日付など、挿入される情報のタイプを指定する Content Type レイヤーが含まれています。入力フィールドにデータを入力後、対応する Content Type を設定して、デザインが正しく App Builder に解析されるようにすることが重要です。

    スタイル設定

    Input には、背景と境界線/下線の色、およびコンテンツのプレフィックス、サフィックス、およびメイン領域のアイコンの色とテキスト スタイルによるスタイリングの柔軟性が備わっています。検証スタイルを変更するには、Indigo.Design ライブラリの各色変数を更新することをお勧めします。

    使用方法

    Input のボックス タイプを使用して画像上にフォームを配置して読みやすくします。デザインの警告やエラー状態で Input を使用する際にヘルパー テキストを使用してユーザーにガイダンスを提供します。

    良い例 悪い例

    その他のリソース

    関連トピック:

    コミュニティに参加して新しいアイデアをご提案ください。