Components

Number input

Use: Deployed English, Spanish, Tagalog

Number input elements are used for numeric inputs.

Number input always has the type of number and provides a min and max attribute to set a range on the component.

Usage

When a number should be the only accepted value within an input element.
If you can’t reasonably predict a user’s answer to a prompt and there might be wide variability in users’ answers.
When users want to be able to paste in a response.

Only show error validation messages or stylings after a user has interacted with a particular field.
Avoid using placeholder text that appears within a input field before a user starts typing. If placeholder text is no longer visible after a user clicks into the field, users will no longer have that text available when they need to review their entries. (People who have cognitive or visual disabilities have additional problems with placeholder text.)

Native onInput and onBlur events are available on this component. They can be used by adding the event handler to your component and it will then listen to the event and respond accordingly when the event fires.

Property	Attribute	Type	Default	Description
`enableAnalytics`	`enable-analytics`	`boolean`	`false`	Emit component-library-analytics events on the blur event.
`error`	`error`	`string`		The error message to render.
`hint`	`hint`	`string`		Optional hint text.
`inputmode`	`inputmode`	`"decimal" \| "numeric"`		The inputmode attribute.
`label`	`label`	`string`		The label for the text input.
`max`	`max`	`number \| string`		Maximum number value The max attribute specifies the maximum value for an input element.
`min`	`min`	`number \| string`		Minimum number value The min attribute specifies the minimum value for an input element.
`name`	`name`	`string`		The name to pass to the input element.
`required`	`required`	`boolean`	`false`	Set the input to required and render the (Required) text.
`value`	`value`	`string`		The value for the input.

Name	Description
`component-library-analytics`	The event used to track usage of the component. This is emitted when the input is blurred and enableAnalytics is true.

Avoid placeholder text for accessibility reasons. Most browsers’ default rendering of placeholder text does not provide a high enough contrast ratio.
Avoid breaking numbers with distinct sections (such as phone numbers, Social Security Numbers, or credit card numbers) into separate input fields. For example, use one input for phone number, not three (one for area code, one for local code, and one for number). Each field needs to be labeled for a screen reader and the labels for fields broken into segments are often not meaningful.