Field of text

Components

Field of text

The inputs are used to request a text input from the user. They are usually found in creation or editing flows.

Preview

Figma

Predictive text

When you click or enter any of the items shown as predictive search results, it will be written into the input and will trigger the search in an automated way.

The functionality of suggestions with predictive text will not begin until the introduction of the third character. Definition:

The search occurs when you type at least 3 characters.

The dropdown will show ten results without a scroll bar. If a request is made that includes more results, only up to a maximum of 25 results will be scrolled.

When you click on one of the items shown as predictive search results, it will be written into the input and will trigger the search in an automated way.

Navigation over the dropdown is allowed by using the keyboard.

Uses

They are usually found in forms.

When to use

We use the input when only one line of text can be entered.

We use the text area variant when multiple lines of text may be needed.

When not to use

To reduce the cognitive load of the user, it is recommended to mark the mandatory fields with an asterisk.

At the top we should mention that the asterisks indicate mandatory fields.

In the texts of help in detail provide an example. We use only when required and it is not recommended to abuse this resource.

We include a concise label.

Behaviour

Types

Text only

Text + Icon

Text + Button

Text + Icon + Button

States

Default

Focus

Filled

Error

Display of the component text field in satisfactory state

Success

Disabled

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

The inputs use a basic HTML input element behind the scenes and offer similar functionality and API for their users.

The label property is always necessary for accessible control of the input.

When the input is disabled, the “disabled” property has a “true” value, as it also transmits this information correctly to assistive technologies.

The type property is used to adapt the input to different tasks. Depending on the device and browser, this setting also changes the on-screen visible keyboard for users of supported devices.

When the input has the clearable property set to true or is password type, the icons that perform some action (clear the field or show/hide password) have role="button" and the aria-label property editable.