Input
Inputs that accept typed input from users
For the correct usage of the input field check all the available stories and the Forms page under General Info
Usage
Input fields allow users to type and submit text. They are commonly seen in forms.
Anatomy
1. Label text: A clear label for the input field (use
2. Prefix label (optional): An icon, text or symbol that can be used as a prefix label.
3. Error message (situational): A short and actionable message below the error field to help the user fix the error.
4. Placeholder text: Indicates an example of text the user can enter.
5. Container: Holds the input elements.
6. Suffix icon (optional): An icon, text or symbol that can be used as a trailing label.
Usage
Format
Avoid all caps
Stick to sentence case when creating labels. Avoid writing in all caps since it can be hard to read and scan.
Do
Don't
Add placeholders to indicate input format
Use a placeholder text as a guide or an example to show what the user needs to fill in.
Do
Don't
Things to consider
Write clear and concise labels
Aim to provide a clear label for each input field. Users should immediately know what input to enter based on the labels given. With each label and placeholder text, strive to write a succinct description (one or two words) so users are able to quickly scan over it. Avoid using a placeholder as a label.
Do
Don't
Assign each field a proper size
Input fields should be sized accordingly to their expected input. The field should be large enough to fit the maximum possible field value. Consider translations for labels and placeholders.
Do
Don't
Fields that logically go together should be inline in desktop
Stacking related fields such as names, addresses, and payment info may cause unnecessary friction, take up too much space, and can break a user's flow. However fields should be placed in a single column for mobile screens or in special cases like the sign up or log-in flow.
Do
Don't
Group related fields
Place related fields together closely. Grouping input fields manages user expectations and helps the them scan over the form easily.
Do
Don't
Set how to horizontally align the number increment input
Improves UX for form fields like Usernames, Emails, Company Names, etc. Autocomplete defaults to 'on' but you can disable it with 'off'. If you wish to use more specific tokens like 'given-name' and 'family-name', see the link below.
Not for general use. This is only for Messaging search. If you'd like to use this input, make sure you discuss with UI Eng
Not for general use. This is only for browse mobile page. If you'd like to use this input, make sure you discuss with UI Eng
Clears the inline date range picker's value. Only used for InputType.DATERANGE_INLINE. Since inline usage of sat-calendar component doesn't have a binding input element, we need to reset the date range picker's value manually when the form control's value gets reseted.
Force color white for transparent cases in light mode.
This input only works on mobile when the type is `InputType.DATE`. If true, the date icon will be hidden on mobile.
First validation happens only on blur, and validates on keyup once an error exists
Not for general use. This is only for larger title inputs of type TEXT. If you'd like to use this input, make sure you discuss with UI Eng
Displays hint under input field upon focus
Not for general use. This is only for browse mobile page. If you'd like to use this input, make sure you discuss with UI Eng.
Hints the browser what kind of virtual keyboard to display when the input is focused.
Sets aria label for accessibility when there is no associated visible text
Set a minimum value for number inputs
Shake input on blur event
Highlight input field when date value is set
Immediately check state of input with validation