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 (アイドル): コンテンツの代わりにプレースホルダーを表示します。Idle & Hover (アイドルおよびホバー) は、ユーザーがカーソルを合わせたときに入力がアクティブであることを示します。Filled (塗りつぶし済み): ユーザーがコンテンツを入力し、入力から移動した後に表示されます。Filled & Hover (塗りつぶし済みおよびホバー) - コンテンツが入力された後、ユーザーが入力の上にマウスを置いたときに入力がアクティブであることを示します。Focused (フォーカス済み) は、ユーザーがアクティブに入力を行っていることを視覚的に示します。

    `idle` `idle & hover` `filled` `filled & hover` `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 を使用する際にヘルパー テキストを使用してユーザーにガイダンスを提供します。

    良い例 悪い例

    その他のリソース

    関連トピック:

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