Input

Use the Input component to collect user data such as strings, numbers fitting various contexts, dates, and other values, such as emails and passwords. Multiple inputs can be combined to craft easy-to-use and aesthetic forms. The Input is visually identical to the Ignite UI for Angular Input Group Component

Input Demo

Types

In Sketch and Adobe XD the Input lets you choose a preset from three options: simple, hint which comes with a helper text, and searchbar. In Figma we offer a choice between a simple input with or without a hint (boolean property), and a searchbar.

`simple`

`hint`

`searchbar`

The hint and simple presets in Sketch and Adobe XD offer choice between three distinct types: line style for a more airy look, border style for a more structured perception on solid color backgrounds, and boxed style which is most appropriate when the Input is placed on top of a vivid image to improve the readability of its content. Since we are deprecating the line style, in Figma we have only the border and box types available.

`border`

`box`

Interaction State

In Sketch and Adobe XD, each of these presets can be inserted in an Enabled or a Disabled state. In Figma, the Input is in an Enabled state by default and can be switched to a Disabled state from the properties panel on the right.

`enabled`

`disabled`

State

The Input component goes through different states as the user interacts with it: Idle, which displays the placeholder in the place of the content; Hover, indicating that the input is active when the user hovers over it; Filled, which appears after the user has entered content and moved on from the input; and Focused, which provides a visual cue that the user is actively typing in the input.

`idle`

`hover`

`filled`

`focused`

Every experienced designer uses constraints wisely to limit the user input and avoid invalid states, hence the availability of validation styles. Through the available validation styles, the Input is equipped for sophisticated designs that display Success, Warn, and Error visuals.

`success`

`warn`

`error`

In Sketch, the states and validation states are achieved with Symbol Overrides, while in Figma you can switch between them using the "State" property in the properties panel on the right. In Adobe XD we are using the Component States paradigm to let you easily switch between them.

Layout

The Input has rich support for Prefix and Suffix through a combination of text and icons that can, in certain cases, reduce the input effort for the user: e.g. an @email.com Suffix means both fewer keystrokes and more clarity of expected content. In Figma, removing the Prefix or Suffix can be achieved in the properties panel by switching them on or off. In Sketch, to remove the Prefix or Suffix simply set their override to ~No Symbol, and the smart layout rules will adjust the input accordingly. In Adobe XD, the same can be achieved by deleting the unnecessary Prefix or Suffix layer and the Stack will take care to adjust the layout accordingly.

Content Type

Each Input component includes a Content Type layer that specifies the type of information being inserted, such as text, email, password, phone number, or date. After entering data into the input field, it's important to set the Content Type accordingly to ensure that your design is correctly parsed into App Builder.

Styling

The Input comes with styling flexibility through the colors of its background and border/bottom line, as well as icon color and text styles of its prefix, suffix, and main areas of content. To change the validation styles, it is recommended to update the respective color variables in the Indigo.Design library.

Usage

Use the box type of Input when placing forms on top of an image to improve readability. When using an Input in warn or error state in your designs, choose a preset with helper text and use the opportunity to provide guidance to the user.

Do	Don't