Numerical field

Components

Numerical field

Numeric entries are similar to text entries, but are used to enter numeric values and include controls to incrementally increase or decrease the value.

Preview

Figma

Uses

Numeric input is usually found in forms and is used in situations where the user is expected to enter a number as a valid input.

When to use

Receiving the age of a user on a form.

Receiving the amount of a financial transaction.

Receiving a phone number or a credit card.

When not to use

Receiving a username or an email address. These fields must accept special letters and characters, not just numbers.

Receiving a date. It is preferable to use a calendar to select a date instead of entering numbers manually.

Receiving an address. It is preferable to use a text field to receive an address rather than a numeric input.

Behaviour

Types

Basic

Button

States

Default

Focus

Display of the numeric field with value completed

Filled

Success

Error

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 input arrows have the aria-label property.