Usage
Inputs enable users to enter text data. They support different formats such as plain text, passwords, numbers, or dates.
Best practices
Use input fields where the expected data is short.
Don’t use the input field when the expected data is longer. Use the textarea instead.
Labels
Labels indicate what type of data the field needs. Having labels present gives us two major advantages:
- They are programmatically associated with the field, which means assistive technologies will read them when the user focuses on them.
- When the user click/tap on the label, the browser passes the focus to the field, which makes it easier for touch screens, and users with motor disabilities.
Important note: Labels should always be present, unless for those cases where the context and elements that surround the input make it
clear what data is needed (e.g. a search input close to a table or a list). In those cases, make sure an ariaLabel
is
used.
Use labels to specify the data required in the input field.
Do not avoid labels as they are essential to the input completion and later understanding.
Keep the label short and concise. Always use sentence case.
Avoid using long sentences or colons.
Placeholders
Use the placeholders to help users understand the format needed. They can never be a substitute for the label or hint because:
- They disappear as soon as the user interacts with the field.
- They usually do not meet a strong contrast ratio (+3:1 in our case).
- Screen readers do not read placeholders as they do labels.
When using placeholders, write direct examples using sentence-case.
Do not use placeholders as labels or as hints or to provide important information.
Hint & errors
Hints and error messages provide additional directions to support the label meaning in an accessible manner.
Use hints to provide useful information about the required input.
Do not duplicate information, if an error message is repeating the hint, hide the hint.
Examples
Live Preview
Props
Fetching props...
Slots
Fetching slots...
Fetching events...
Events
Fetching events...