Help picking the right number input
This component should only be used for entering numbers such as prices, quantities, IDs, or other numeric data that could be multiple digits (e.g., 100, 2500, 42.75).
- If users need to enter numbers and text, use ba-input-text
- For phone numbers, choose ba-input-phone-number
- For very short or single-digit numeric entries, particularly those where incrementing/decrementing is common, use ba-input-stepper
When an input uses type="number" it's role becomes spinbutton. This presents the risk of users accidentally incrementing a number when they're trying to do something else. It also prevents users from inputting non numerical characters with no feedback as to why. To resolve this we use a combination of inputmode="numeric" and a pattern="[0-9]*". This allows us to validate the input correctly and show relevant error messages to the user.
More info can be found below:
Always use the label attribute to give a meaningful label to the field.
Further reading:
Disabled form elements are not supported in BAgel because they create accessibility challenges, such as preventing keyboard navigation, confusing screen reader users, and reducing visual clarity for those with impairments
Further reading:
Placeholders on inputs are not supported in BAgel because they create accessibility challenges, such as failing to provide persistent labels for screen readers, reducing color contrast for users with visual impairments, and causing confusion for those with cognitive difficulties.
If you would like to add a infomations to help the user fill the input, you can use the hint-text attribute.
Further reading:
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
autocomplete
|
autocomplete |
The autocomplete setting | string | undefined |
'on' |
hintText
|
hint-text |
Hint text to show above the input | string | undefined |
undefined |
invalid
|
invalid |
Whether the input is invalid | boolean | undefined |
false |
label
(required)
|
label |
A label for the input | string |
undefined |
maxLength
|
max-length |
Max amount of characters allowed in validation | string | undefined |
undefined |
minLength
|
min-length |
Min amount of characters allowed in validation | string | undefined |
undefined |
name
|
name |
The name of the input | string | undefined |
undefined |
required
|
required |
Whether the input is required | boolean | undefined |
false |
value
|
value |
The value of the input | string | undefined |
'' |
Events
| Event | Description | Type |
|---|---|---|
baBlur |
Emitted when the input loses focus. | CustomEvent<void> |
baFocus |
Emitted when the input has focus. | CustomEvent<void> |
baOnInput |
Emitted when a keyboard input ocurred. | CustomEvent<KeyboardEvent> |
baSubmit |
Emitted when the user submits the form from within the component | CustomEvent<void> |
Methods
isValid() => Promise<boolean>
An exposed method for triggering the inputs required validation
reset() => Promise<void>
Resets the input back to its initial value
Returns
Type: Promise<void>
Slots
| Slot | Description | Permitted elements |
|---|---|---|
"error" |
Element will be rendered in the error slot | <p> |
"error-not-a-number" |
Element will be rendered in the error-not-a-number slot | <p> |
"error-required" |
Element will be rendered in the error-required slot | <p> |
"error-min-length" |
Element will be rendered in the error-min-length slot | <p> |
"error-max-length" |
Element will be rendered in the error-max-length slot | <p> |
Parent components
ba-input-number can be slotted into:
<ba‑accordion><ba‑card><ba‑card‑segmented><ba‑details><ba‑flex><ba‑form><ba‑form‑group><ba‑form‑group‑dropdown><ba‑grid>
Usage
Basic usage
<ba-input-number label="Label text" name="number" required></ba-input-number>
Help text
It is sometimes useful to add hint text.
<ba-input-number label="Label text" name="number" hint-text="Custom hint text" required></ba-input-number>
Error messages
It is sometimes useful to add custom validation messages. For example you may wish to:
- Add translations
- Provide more detail and/or contextual advice
- Add links to further information on the error
We do provide error messages with translations for:
- required
- not a number
<ba-input-number label="Label text" name="number" hint-text="Custom hint text" required>
<p slot="error">We need to know this. <a href="#">Why we need to know</a>
</p>
</ba-input-number>