Guidelines
Guidelines
Usage
An Input should:
- Have its width reflect the amount of content that is expected to be entered.
- Be grouped with its related siblings inside a form. Headlines can be used to clarify the content of a group.
- Have 'clearable' enabled when the value is wanted to be able to be cleared to have no value.
Input vs. Textarea
An Input should:
- Be used for inputting simple textual content like names, emails, and passwords.
A Textarea should:
- Be used for long pieces of text where sentences or even paragraphs can be input.
States
The states of the Input change when the user engages with it and/or when an outside condition affects it.
An Input should:
- Use disabled when the Input is temporarily inaccessible, but when it has the prospect to be enabled in a different setting.
- Be set to read-only when the content, or sensitive information like a user name, can not be edited directly in its context.
- Only automatically focus the Input on page load when a user expects it. With autofocus assigned, a screen reader immediately directs users to the form control without warning them.
Label
An Input's label communicates what should be entered into the Input.
A label should:
- Indicate a distinct input.
- Be short.
- Use sentence-case for optimal readability.
- Never include interactive elements like a link or button as they are considered inaccessible by assistive technologies.
Help text
An Input'shelp-text provides extra guidance or instructions to the user. It can also clarify how the information will be used.
A help-text should:
- Be used when extra guidance or instructions are beneficial.
- Be supplementary to the Input’s label, not repeating it.
- Use sentence-case for optimal readability.
Placeholder
An Input's placeholder is an example of the input the user should enter.
A placeholder should:
- Provide an example of what the user should enter.
- Be supplementary to the Input’s label and help-text, not repeating it.
- Be used in conjunction with a label.
- Be considered temporary and should not be relied on when it comes to instructing what information the user is required to enter. Label and help-text should be used to instruct on the type of information that is to be entered.
Icon
The Input's icon is an optional element that can be enabled to appear before or after the entered input.
An Icon should:
- When enabled, appear in all states.
- Provide additional clarification on the content that should be entered.
- Always appear in conjunction with the label of the Input and should not solely rely on the type of content that can be entered.
- Be considered decorative and not perform any actions.
- Use Cosmos Icons or icons that are based on icon guidelines.
🎨 How to change the icon in Figma Find a tutorial on changing the icon in Figma here. The process of changing the icon is the same as changing the prefix, with the only difference being that the instance swap property of the input component is called "icon" instead of "↳ prefix-content". Use the "icon-placement" property to display an icon before or after the entered input.
Form validation
An Input should:
- Be set to required if entering information is required to submit a form.
- Be marked as “Required” when the majority of the fields in the same form are optional.
- Be marked as "Optional" when the majority of the fields in the same form are required.
- Update its validation state when the form is submitted. And after submitting as soon as the user interacts with the component.
- Have a validation message that is supplementary to the Input's label and help-text without repeating them.
- Instruct how to avoid possible errors with a validation message.
- Have the validation message be as short and clear as possible.
Accessibility
An Input should:
- Set a contrasting appearance based on the environment it's used in. Use lightappearance in dark environments and vice versa.