Input
Also known as: Text field, Textbox, Form
Resources
Properties
| Property | Values | Default |
|---|---|---|
Size Variant | Sm | Md | Lg | Xl | Md |
State Variant | Default | Hover | Focus | Active | Error | Disabled | Default |
Has label Boolean | true | false | true |
Label Text | string | Label |
Has start item Boolean | true | false | true |
Start item InstanceSwap | Any icon | heart |
Value Text | string | Value |
Has end item Boolean | true | false | true |
End item InstanceSwap | Any icon | close |
Has helper Boolean | true | false | true |
When to use
Use inputs to collect short, single-line data from users (name, email, password, search query)
Avoid inputs when selecting from predefined options, use select instead.
Do not use inputs for large blocks of text, use textarea instead.
Behaviour
Input (and all other forms and selection controls) express states. States indicate current condition of the component to someone interacting with it. Using states ensure clear user feedback, highlighting possible actions or barriers. We have included most common states:
| State | Context |
|---|---|
Default | Status of the component before the interaction. Also referred to as ‘resting’. |
Hover | When the user moves their cursor over the component, but is not taking the action. Slight visual change can indicate interactivity of the component. |
Focus | When user selects the component via keyboard navigation, but has not yet taken action on it. |
Active | State that communicates that the user has taken action on the component. |
Error | Used when an invalid action occurs. Component may appear red or display helper, signaling an issue that needs resolution. |
Disabled | A non-interactive state where the component appears faded or grayed out. It indicates that the action is unavailable at the moment. |
Input types
Input component can be configured to use various HTML input types, such as: number, date, password, search, email, text, time and URL.
These types help ensure forms can validate whether the user has provided the correct input format.
Size
Dimensions of the input are tied to the global scale tokens. This ensures that the components, especially forms, with similar size settings remain consistent across the interface. scale tokens also provides more granular control over dimensional settings.
--scale-height-<size>
--scale-padding-<size>
--scale-gap-<size>
--scale-radius-<size>
--scale-icon-size-<size>
--scale-text-size-<size>
--scale-text-height-<size>
Required and optional
Use an asterisk (*) to indicate a required field. When the majority of fields in form group are optional, label only the required ones for clarity. Alternatively, if most fields in the form group are required, highlight only the optional fields to avoid unnecessary visual clutter.
Label position
Field label is typically positioned on top of the input container. For the Xl size, the label appears inside the input container.
Initially, label for Xl size behaves similar to a placeholder, but as the user provides input, the label resizes and moves to the top of the input container.
Helper component
Helper is a nested component and can optionally be shown below the input container. Use helper text if providing additional context about the form item (error message or hint). Keep the message concise and clear, optionally show an icon to support the message.
| Property | Values | Default |
|---|---|---|
Error Boolean | true | false | false |
Has icon Boolean | true | false | true |
Icon InstanceSwap | Icon | info |
Label Text | string | Helper |