Number Input

import {NumberInputModule} from "@qualcomm-ui/angular/number-input"

Overview

This component implements the ARIA Spinbutton pattern. The Home and End keys work differently than a text input:
- Home: If the spinbutton has a minimum value, sets the value to its minimum.
- End: If the spinbutton has a maximum value, sets the value to its maximum.
Template-driven and Reactive form values are supplied as numbers. When the field is cleared, the value is set to NaN. You must account for this in your application logic.

Examples

Simple

The simple API bundles all subcomponents together into a single directive.

Brand

Label

<q-number-input class="w-72" label="Label" placeholder="Enter a number" />

Child Directives

Provide child directives to customize specific elements while keeping the simple API's default structure.

Brand

Label

<q-number-input class="w-72" placeholder="Enter a number">
  <label q-number-input-label>Label</label>
</q-number-input>

Composite

Build with the composite API for granular control. This API requires you to provide each subcomponent, but gives you full control over the structure and layout.

Brand

Label

<div class="w-72" q-number-input-root>
  <label q-number-input-label>Label</label>
  <div q-number-input-input-group>
    <input placeholder="Enter a number" q-number-input-input />
    <div q-number-input-control></div>
    <span q-number-input-error-indicator></span>
  </div>
  <div q-number-input-error-text>Error</div>
</div>

Min and Max values

Pass the min and max props to the root component to set the minimum and maximum values of the number input.

If the value entered is less than min or greater than max, it will be clamped to the nearest boundary on blur or enter.

Brand

<q-number-input class="w-72" defaultValue="7" max="10" min="5" />

Step interval

Pass the step prop to the root component to set the increment or decrement step interval.

Brand

<q-number-input class="w-72" placeholder="Enter a number" step="3" />

States

The following shows how the component appears in each interactive state.

Brand

Disabled

Read only

Invalid

<q-number-input disabled label="Disabled" placeholder="Disabled" />
<q-number-input label="Read only" placeholder="Read only" readOnly />
<q-number-input
  errorText="Invalid"
  invalid
  label="Invalid"
  placeholder="Invalid"
/>

Sizes

Customize size using the size prop. The default size is md.

Brand

<q-number-input
  class="w-56"
  placeholder="sm"
  size="sm"
  startIcon="Sigma"
/>
<q-number-input
  class="w-64"
  placeholder="md"
  size="md"
  startIcon="Sigma"
/>
<q-number-input
  class="w-72"
  placeholder="lg"
  size="lg"
  startIcon="Sigma"
/>

Error Text and Indicator

Error messages are displayed using two props:

invalid
errorText (or the q-number-input-error-text directive when using the composite API)

The error text and indicator will only render when invalid is true.

Brand

Label

Value must be greater than 0

Forms

Template Forms

When using template-driven forms with ngModel, perform validation manually in your component and pass the result to the invalid property.

TIP

Form validation timing is controlled by the updateOn property on the form control.

Brand

Label

<q-number-input
  class="w-72"
  errorText="Value must be greater than 0"
  label="Label"
  placeholder="Enter a value"
  [invalid]="isInvalid()"
  [(ngModel)]="value"
/>

Required

When using template forms, pass the required property to apply a validator to the form control.

Brand

Required

<q-number-input
  #textInput
  class="w-72"
  label="Required"
  placeholder="Enter a value"
  required
  [(ngModel)]="value"
/>

Reactive Forms

Use Reactive forms for better control of form state and validation.

Brand

State Guidelines

The disabled, invalid, and required properties have no effect when using Reactive Forms. Use the equivalent Reactive Form bindings instead:

Brand

Disabled

Invalid

Required

disabledField = new FormControl(5)
invalidField = new FormControl(0, {
  validators: [Validators.min(1)],
})
requiredField = new FormControl(5, {validators: [requiredNumberValidator]})

ngOnInit() {
  this.disabledField.disable()
  this.invalidField.markAsDirty()
}

Composite API & Forms

When using the composite API with Reactive Forms, always apply form control bindings to the q-number-input-root directive.

Brand

Composite Forms

API

<q-number-input>

The <q-number-input> component extends the q-number-input-root directive with the following properties:

Prop	Type
errorText Optional error that describes the element when invalid is true.	string

hint Optional hint describing the element. This element is automatically associated with the component's input element for accessibility.	string

label Optional label describing the element. Recommended. This element is automatically associated with the component's input element for accessibility.	string

placeholder HTML placeholder attribute, passed to the internal input element.	string

errorText

Type

string

Description

Optional error that describes the element when invalid is true.

hint

Type

string

Description

Optional hint describing the element. This element is automatically associated with the component's input element for accessibility.

label

Type

string

Description

Optional label describing the element. Recommended. This element is automatically associated with the component's input element for accessibility.

placeholder

Type

string

Description

HTML placeholder attribute, passed to the internal input element.

Prop	Type	Default
allowMouseWheel Whether to allow mouse wheel to change the value	boolean
allowOverflow Whether to allow the value to overflow the min/max range	boolean	true
clampValueOnBlur Whether to clamp the value when the input loses focus (blur)	boolean	true
defaultValue The initial checked state of the checkbox when rendered. Use when you don't need to control the checked state of the checkbox. This property will be ignored if you opt into controlled state via form control bindings.	number
dir The document's text/writing direction.	'ltr' \| 'rtl'	"ltr"
disabled Controls whether the input is disabled in template-driven forms. When true, prevents user interaction and applies visual styling to indicate the disabled state.	boolean
endIcon lucide-angular icon, positioned after the input.	\| string \| LucideIconData

focusInputOnChange Whether to focus the input when the value changes	boolean	true
formatOptions The options to pass to the `Intl.NumberFormat` constructor	NumberFormatOptions
getRootNode A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.	() => \| Node \| ShadowRoot \| Document
inputMode Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices	\| 'text' \| 'tel' \| 'numeric' \| 'decimal'	"decimal"
invalid Controls the visual error state of the input. When true, applies semantic error styling to indicate validation failure.	boolean
locale The current locale. Based on the BCP 47 definition.	string	'en-US'
max The maximum value of the number input	number	Number.MAX_SAFE_INTEGER
min The minimum value of the number input	number	Number.MIN_SAFE_INTEGER
name The name of the input field in a checkbox. Useful for form submission.	string
pattern The pattern used to check the element's value against	string	"[0-9]*(.[0-9]+)?"
readOnly Whether the input is read-only. When true, prevents user interaction while keeping the input focusable and visible.	boolean
required Controls whether the input is required in template-driven forms. When true, the input must have a value for form validation to pass.	boolean
size The size of the input field and its elements. Governs properties like font size, item padding, and icon sizes.	\| 'sm' \| 'md' \| 'lg'	'md'
spinOnPress Whether to spin the value when the increment/decrement button is pressed	boolean	true
startIcon lucide-angular icon, positioned before the input.	\| string \| LucideIconData

step Amount to increment/decrement the value when using stepper buttons or arrow keys.	number	1
translations Specifies the localized strings that identify the accessibility elements and their states	{ decrementLabel?: string incrementLabel?: string valueText?: ( value: string, ) => string }
(valueChanged) Event emitted when the checkbox is checked or unchecked. This is only emitted on interaction. It doesn't emit in response to programmatic form control changes.	{ value: string valueAsNumber: number }
(valueInvalid) Function invoked when the value overflows or underflows the min/max range	{ reason: \| 'rangeUnderflow' \| 'rangeOverflow' value: string valueAsNumber: number }

The initial checked state of the checkbox when rendered. Use when you don't need to control the checked state of the checkbox. This property will be ignored if you opt into controlled state via form control bindings.

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

disabled

Type

boolean

Description

Controls whether the input is disabled in template-driven forms. When true, prevents user interaction and applies visual styling to indicate the disabled state.

endIcon

Type

| string
| LucideIconData

Description

lucide-angular icon, positioned after the input.

focusInputOnChange

Type

boolean

Description

Whether to focus the input when the value changes

formatOptions

Type

NumberFormatOptions

Description

The options to pass to the Intl.NumberFormat constructor

getRootNode

Type

() =>
| Node
| ShadowRoot
| Document

Description

A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.

inputMode

Type

| 'text'
| 'tel'
| 'numeric'
| 'decimal'

Description

Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices

invalid

Type

boolean

Description

Controls the visual error state of the input. When true, applies semantic error styling to indicate validation failure.

locale

Type

string

Description

The current locale. Based on the BCP 47 definition.

max

Type

number

Description

The maximum value of the number input

min

Type

number

Description

The minimum value of the number input

name

Type

string

Description

The name of the input field in a checkbox. Useful for form submission.

pattern

Type

string

Description

The pattern used to check the element's value against

readOnly

Type

boolean

Description

Whether the input is read-only. When true, prevents user interaction while keeping the input focusable and visible.

required

Type

boolean

Description

Controls whether the input is required in template-driven forms. When true, the input must have a value for form validation to pass.

size

Type

| 'sm'
| 'md'
| 'lg'

Description

The size of the input field and its elements. Governs properties like font size, item padding, and icon sizes.

spinOnPress

Type

boolean

Description

Whether to spin the value when the increment/decrement button is pressed

startIcon

Type

| string
| LucideIconData

Description

lucide-angular icon, positioned before the input.

step

Type

number

Description

Amount to increment/decrement the value when using stepper buttons or arrow keys.

translations

Type

{
  decrementLabel?: string
  incrementLabel?: string
  valueText?: (
    value: string,
  ) => string
}

Description

Specifies the localized strings that identify the accessibility elements and their states

(valueChanged)

Type

{
  value: string
  valueAsNumber: number
}

Description

Event emitted when the checkbox is checked or unchecked. This is only emitted on interaction. It doesn't emit in response to programmatic form control changes.

(valueInvalid)

Type

{
  reason:
    | 'rangeUnderflow'
    | 'rangeOverflow'
  value: string
  valueAsNumber: number
}

Description

Function invoked when the value overflows or underflows the min/max range

Attribute / Property	Value
`class`	'qui-input__root'
`data-disabled`
`data-focus`
`data-invalid`
`data-part`	'root'
`data-scope`	'number-input'
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-input__root'

data-disabled

Value

data-focus

Value

data-invalid

Value

data-part

Value

'root'

data-scope

Value

'number-input'

data-size

Value

| 'sm'
| 'md'
| 'lg'

q-number-input-input-group

Entity not found: NumberInputInputGroupComponent

Learn more

Attribute / Property	Value
`class`	'qui-input__input-group'
`data-disabled`
`data-focus`
`data-invalid`
`data-part`	'input-group'
`data-readonly`
`data-scope`	'number-input'
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-input__input-group'

data-disabled

Value

data-focus

Value

data-invalid

Value

data-part

Value

'input-group'

data-readonly

Value

data-scope

Value

'number-input'

data-size

Value

| 'sm'
| 'md'
| 'lg'

q-number-input-label

Entity not found: NumberInputLabelComponent

Learn more

Attribute / Property	Value
`class`	'qui-input__label'
`data-disabled`
`data-focus`
`data-invalid`
`data-part`	'label'
`data-scope`	'number-input'
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-input__label'

data-disabled

Value

data-focus

Value

data-invalid

Value

data-part

Value

'label'

data-scope

Value

'number-input'

data-size

Value

| 'sm'
| 'md'
| 'lg'

q-number-input-hint

Prop	Type
id	string

Type

string

Attribute / Property	Value
`class`	'qui-input__hint'
`data-disabled`
`data-part`	'hint'
`data-scope`	'number-input'

q-number-input-control

Attribute / Property	Value
`class`	'qui-number-input__control'
`data-disabled`
`data-focus`
`data-invalid`
`data-part`	'control'
`data-scope`	'number-input'
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-number-input__control'

data-disabled

Value

data-focus

Value

data-invalid

Value

data-part

Value

'control'

data-scope

Value

'number-input'

data-size

Value

| 'sm'
| 'md'
| 'lg'

q-number-input-decrement-trigger

Entity not found: NumberInputDecrementTriggerComponent

Learn more

Attribute / Property	Value
`class`	'qui-number-input__step-trigger'
`data-disabled`
`data-part`	'decrement-trigger'
`data-scope`	'number-input'
`data-size`	\| 'sm' \| 'md' \| 'lg'
`tabIndex`	-1

class

Value

'qui-number-input__step-trigger'

data-disabled

Value

data-part

Value

'decrement-trigger'

data-scope

Value

'number-input'

data-size

Value

| 'sm'
| 'md'
| 'lg'

tabIndex

Value

-1

q-number-input-increment-trigger

Entity not found: NumberInputIncrementTriggerComponent

Learn more

Attribute / Property	Value
`class`	'qui-number-input__step-trigger'
`data-disabled`
`data-part`	'increment-trigger'
`data-scope`	'number-input'
`data-size`	\| 'sm' \| 'md' \| 'lg'
`tabIndex`	-1

class

Value

'qui-number-input__step-trigger'

data-disabled

Value

data-part

Value

'increment-trigger'

data-scope

Value

'number-input'

data-size

Value

| 'sm'
| 'md'
| 'lg'

tabIndex

Value

-1

q-number-input-input

Prop	Type
id	string

Type

string

Attribute / Property	Value
`class`	'qui-input__input'
`data-disabled`
`data-empty`
`data-invalid`
`data-part`	'input'
`data-scope`	'number-input'
`data-size`	\| 'sm' \| 'md' \| 'lg'

class

Value

'qui-input__input'

data-disabled

Value

data-empty

Value

data-invalid

Value

data-part

Value

'input'

data-scope

Value

'number-input'

data-size

Value

| 'sm'
| 'md'
| 'lg'

q-number-input-error-text

Prop	Type
id	string

Type

string

Attribute / Property	Value
`class`	'qui-input__error-text'
`data-part`	'error-text'
`data-scope`	'number-input'
`hidden`	boolean

class

Value

'qui-input__error-text'

data-part

Value

'error-text'

data-scope

Value

'number-input'

hidden

Value

boolean

q-number-input-error-indicator

Entity not found: NumberInputErrorIndicatorComponent

Learn more

Attribute / Property	Value
`class`	'qui-input__error-indicator'
`data-part`	'error-indicator'
`data-scope`	'number-input'
`data-size`	\| 'sm' \| 'md' \| 'lg'
`hidden`	boolean

class

Value

'qui-input__error-indicator'

data-part

Value

'error-indicator'

data-scope

Value

'number-input'

data-size

Value

| 'sm'
| 'md'
| 'lg'

hidden

Value

boolean

Combobox

Password Input