Input

Usage

Inputs enable users to enter text data. They support different formats such as plain text, passwords, numbers, or dates.

Best practices

Do

Use input fields where the expected data is short.

Don't

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.

Do

Use labels to specify the data required in the input field.

Don't

Do not avoid labels as they are essential to the input completion and later understanding.

Do

Keep the label short and concise. Always use sentence case.

Don't

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.

Do

When using placeholders, write direct examples using sentence-case.

Don't

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.

Do

Use hints to provide useful information about the required input.

Don't

Do not duplicate information, if an error message is repeating the hint, hide the hint.

Examples

Live Preview

Props

Slots

Events