Input (number)

Since 2.6.0 Form-ready since 2.6.0

Show deprecated version

Guidelines

Guidelines

The number input component allows users to enter and adjust numerical values. It’s commonly used in forms, calculators, and other areas where precise numerical input is required. We typically use the number input component to ensure accurate and efficient data entry.

1. Label
2. Required field indicator
3. Value
4. Stepper buttons
5. Input field
6. Helper or feedback text

Options

• Label: See form field.
• Value: See form field.
• Required: See form field.
• Helper text: See form field.
• Feedback text: See form field.
• Show text as tooltip: See form field.
• Placeholder: See form field.
• Allowed characters pattern: Specify the characters allowed for input. We typically use this to reject invalid characters, such as decimal points. When users type an invalid character, a shaking animation is immediately triggered.
• Pattern: Define the expected input using regular expressions, such as an integer between 1 and 100. We often use this to validate the input when the user leaves the field or clicks submit.
• Min/Max: Specify the minimum and maximum values that can be entered to ensure the input stays within the defined range. We typically use this option to prevent invalid entries and guide users towards acceptable values.
• Show stepper buttons: Use these optional controls to increment or decrement the value (suitable for small ranges with few steps). We typically use these buttons when precise adjustments are needed, such as in quantity selectors, rating systems or form inputs requiring fine-tuned numerical values.

Behavior in context

• Interaction: Users can type a value or use stepper buttons to adjust it. We recommend using stepper buttons, especially for touch interactions, to enhance usability and precision.
• Validation: See form field.
• Overflow: Numbers are truncated to fit within the input field. Ensure that the expected value is visible in the input field so it can be properly displayed.
• Alignment: Number inputs are always aligned to the right.

States

The number input has five states: default, hover, focused, disabled and read-only.

Dos and Don’ts

• Do set appropriate min and max values to prevent invalid entries and guide user input
• Do provide clear error messages when the input value is out of the allowed range or does not match the required pattern
• Do consider special cases such as zero, negative numbers and very large numbers to ensure all possible inputs are handled correctly
• Don't specify patterns that do not align with your use case, e.g. inappropriate intervals between valid values

Related patterns

• Form fields
• Validation
• Layout
• Input
• Select

Development

Development

Examples

Basic

PreviewAngularReactVueJavaScript

Disabled

PreviewAngularReactVueJavaScript

Label

PreviewAngularReactVueJavaScript

Readonly

PreviewAngularReactVueJavaScript

Stepper buttons

PreviewAngularReactVueJavaScript

Validation

PreviewAngularReactVueJavaScript

Slots

PreviewAngularReactVueJavaScript

API

Properties

Name

Description and specifications

allowedCharactersPattern

The allowed characters pattern for the input field

Attribute:

allowed-characters-pattern

Type:

string ｜ undefined

disabled

Disables the input field

Attribute:

disabled

Type:

boolean

Default:

false

helperText

The helper text for the input field

Attribute:

helper-text

Type:

string ｜ undefined

infoText

The info text for the input field

Attribute:

info-text

Type:

string ｜ undefined

invalidText

The error text for the input field

Attribute:

invalid-text

Type:

string ｜ undefined

label

The label for the input field

Attribute:

label

Type:

string ｜ undefined

max

The maximum value for the input field

Attribute:

max

Type:

number ｜ string ｜ undefined

min

The minimum value for the input field

Attribute:

min

Type:

number ｜ string ｜ undefined

name

name of the input element

Attribute:

name

Type:

string ｜ undefined

pattern

The pattern for the input field

Attribute:

pattern

Type:

string ｜ undefined

placeholder

placeholder of the input element

Attribute:

placeholder

Type:

string ｜ undefined

readonly

Indicates if the field is read-only

Attribute:

readonly

Type:

boolean

Default:

false

required

Indicates if the field is required

Attribute:

required

Type:

boolean

Default:

false

showStepperButtons

Indicates if the stepper buttons should be shown

Attribute:

show-stepper-buttons

Type:

boolean ｜ undefined

showTextAsTooltip

Indicates if the text should be shown as a tooltip

Attribute:

show-text-as-tooltip

Type:

boolean ｜ undefined

validText

The valid text for the input field

Attribute:

valid-text

Type:

string ｜ undefined

value

The value of the input field

Attribute:

value

Type:

number

Default:

0

warningText

The warning text for the input field

Attribute:

warning-text

Type:

string ｜ undefined

Events

Name

Description and specifications

ixBlur

Event emitted when the input field loses focus

Detail:

void

validityStateChange

Event emitted when the validity state of the input field changes

Detail:

ValidityState

valueChange

Event emitted when the value of the input field changes

Detail:

number

Slots

Name

Description and specifications

end

Element will be displayed at the end of the input

start

Element will be displayed at the start of the input