Import
import { InputNumberModule } from '@backbase/ui-ang/input-number'
Usage
Use the bb-input-number-ui component to capture numeric values with optional constraints and masking.
<!-- Basic input number usage -->
<bb-input-number-ui
label="Input Number"
placeholder="Enter a number">
</bb-input-number-ui>
Inputs
|
Input |
Format |
Default |
|---|---|---|
|
allowNegativeSign |
boolean |
false |
|
allowNonDigits |
boolean |
false |
|
autocomplete |
string |
undefined |
|
autofocus |
boolean |
false |
|
disabled |
boolean |
false |
|
inputClassName |
string |
undefined |
|
internalLabel |
string |
undefined |
|
label |
string |
'' |
|
max |
number |
undefined |
|
min |
number |
undefined (respects allowNegativeSign; see description) |
|
placeholder |
string |
'' |
|
readonly |
boolean |
false |
|
required |
boolean |
false |
|
size |
number | string |
20 |
|
step |
number |
undefined |
allowNegativeSign
The allowNegativeSign input permits a leading minus sign in the value. Defaults to false.
<!-- Input number that allows negative values -->
<bb-input-number-ui
[allowNegativeSign]="true"
label="Balance">
</bb-input-number-ui>
allowNonDigits
The allowNonDigits input disables digit-only enforcement, allowing non-digit characters (e.g., for copy/paste cases). Defaults to false.
<!-- Input number that allows non-digit characters -->
<bb-input-number-ui
[allowNonDigits]="true"
label="Custom">
</bb-input-number-ui>
autocomplete
The autocomplete input sets the browser autocomplete attribute for the input. Defaults to undefined.
<!-- Input number with autocomplete off -->
<bb-input-number-ui
autocomplete="off"
label="Amount">
</bb-input-number-ui>
autofocus
The autofocus input determines whether the input should be automatically focused when rendered. Defaults to false.
<!-- Input number with autofocus enabled -->
<bb-input-number-ui
[autofocus]="true"
label="Amount">
</bb-input-number-ui>
disabled
The disabled input disables the number input when set to true. Defaults to false.
<!-- Disabled input number -->
<bb-input-number-ui
[disabled]="true"
label="Amount">
</bb-input-number-ui>
inputClassName
The inputClassName input adds custom class names to the input element. Defaults to undefined.
<!-- Input number with a custom class -->
<bb-input-number-ui
inputClassName="my-custom-class"
label="Amount">
</bb-input-number-ui>
internalLabel
The internalLabel input displays a suffix label inside the input (e.g., a unit). The input automatically adjusts padding to avoid overlap.
<!-- Input number with an internal unit label -->
<bb-input-number-ui
internalLabel="kg"
label="Weight">
</bb-input-number-ui>
label
The label input sets the external label for the input. Defaults to an empty string.
<!-- Input number with a label -->
<bb-input-number-ui label="Amount"></bb-input-number-ui>
max
The max input sets the maximum acceptable value. Defaults to undefined.
<!-- Input number with a maximum value -->
<bb-input-number-ui
[max]="100"
label="Percentage">
</bb-input-number-ui>
min
The min input sets the minimum acceptable value. Defaults to undefined. When allowNegativeSign is false, min is enforced as provided; if negative values are disallowed and min is negative, the component may treat it as undefined or adjust based on internal logic.
<!-- Input number with a minimum value -->
<bb-input-number-ui
[min]="0"
label="Quantity">
</bb-input-number-ui>
placeholder
The placeholder input sets the placeholder text for the input. Defaults to an empty string.
<!-- Input number with a placeholder -->
<bb-input-number-ui
placeholder="0.00"
label="Amount">
</bb-input-number-ui>
readonly
The readonly input makes the input read-only. Defaults to false.
<!-- Read-only input number -->
<bb-input-number-ui
[readonly]="true"
label="Amount">
</bb-input-number-ui>
required
The required input marks the input as required. Defaults to false.
<!-- Required input number -->
<bb-input-number-ui
[required]="true"
label="Amount">
</bb-input-number-ui>
size
The size input configures the minimum width to fit the specified number of characters. Defaults to 20.
<!-- Input number with a custom size -->
<bb-input-number-ui
[size]="30"
label="Amount">
</bb-input-number-ui>
step
The step input configures the stepping interval for arrow key and spinner adjustments. Defaults to undefined.
<!-- Input number with a step value -->
<bb-input-number-ui
[step]="0.5"
label="Amount">
</bb-input-number-ui>
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Input |
Description |
Type |
|---|---|---|
|
ariaActivedescendant |
Identifies the currently active element when focus is on a composite widget |
string |
|
ariaControls |
Indicates which element(s) the widget controls |
string |
|
ariaDescribedby |
References the element that describes the widget |
string |
|
ariaErrormessage |
Identifies the element that contains an error message (used when ariaInvalid is true) |
string |
|
ariaExpanded |
Indicates if the control is expanded or collapsed |
string |
|
ariaInvalid |
Indicates the entered value is not in the expected format |
string |
|
ariaLabel |
Sets an accessible label when the label tag is not rendered |
string |
|
ariaLabelledby |
References elements that provide an accessible name |
string |
|
ariaOwns |
Identifies elements as part of a parent-child relationship |
string |
|
role |
Sets the ARIA role for the input |
string |