We use this component to let users provide us information or allow them to interact with interface. We designed input in a way to give designer a freedom how to use it yet keep the interfaces with forms aligned behavior-wise.
Variants
Input component allows to be used as
- Simple text input
- Menu where users can select from listed options
- Group of combined components (needs to make sense in given interface context)
All variants come with option to provide the user additional guidance which is accessible via Tooltip.
Example of use
One component covers needs to capture various information due to its construction variability.
Format
Label
We offer option either to display or hide label. This enables use of combined forms where one information like a user's name (forename, surname) is captured by two or more components — text inputs.
Label if it's used needs to express what we want to obtain from users information-wise.
Tooltip
Tooltip gives us opportunity to provide more detailed instructions about information obtained from the users. Display of Tooltip is optional.
Mask
Mask represents expected value which users enter to the input or selects from the given list of options. It provides a hint on format of inserted data too.
Warning message
Warning message is a device which informs users about skipping mandatory fields or confused data that were inserted in the input. This message is accompanied with visual support
When users skip mandatory form fields or confuse inserted information format-wise
Icon
Use of icons helps to indicate what information is expected in the input field. Icons displayed within input component can be used when we need to extend basic functionality of plain input. This relates for example to plain input component and use of extensions like fly-out container that may serve as a select menu or a list of hinted option in auto-complete feature.
Modifiers
We have input prepared to be used in light and dark themed interfaces. Select appropriate theme accordingly.
Related resources
-> Specs in Figma