ba-input-stepper

Input steppers are form controls that allow users to select a number within a small range of consecutive values

<form>
  <ba-input-stepper
    label="Label"
    hint-text="Hint text"
    name="inputName"
    max="10"
    value="0"
  >
  </ba-input-stepper>
</form>

Steppers work best for adjusting a small range of value, this is because they require fewer interactions than other input methods. For example changing a stepper value from 1 to 2 requires one interaction. Other input methods, such as a keyboard would result in a larger interaction cost. Users would need to select the input, tap 2 on the keyboard and then press done.

In cases where the value range is large consider an alternative pattern.

Further reading:

https://adrianroselli.com/2024/02/dont-disable-form-controls.html

Element	State	Key	Behaviour
`<BAInputStepper>`	Previous element in DOM has focus	`Tab`	Input gets focus and component buttons do not
`<Input>`	Input has focus	`Tab`	Next tabbable element in the DOM gets focus (not buttons in component)
`<Input>`	Input has focus	`Arrow Up`	Increases the value by 1
`<Input>`	Input has focus and value is the maximum	`Arrow Up`	Value remains unchanged and shows `info-increment-disallowed` message
`<Input>`	Input has focus	`Arrow Down`	Decreases the value by 1
`<Input>`	Input has focus and value is the minimum	`Arrow Down`	Value remains unchanged and shows `info-decrement-disallowed` message
`<Input>`	Input has focus	`Home`	Sets the input to the minimum value
`<Input>`	Input has focus	`End`	Sets the input to the maximum value

Element	State	Action	Behaviour
Decrement `<Button>`	-	`MouseDown`	Input gets focus
Decrement `<Button>`	Input has focus and value over minimum	`Click or Tap`	Decreases the value by 1
Decrement `<Button>`	Input has focus and value is the minimum	`Click or Tap`	Value remains unchanged and shows `info-decrement-disallowed` message
Increment `<Button>`	-	`MouseDown`	Input gets focus
Increment `<Button>`	Input has focus and value under maximum	`Click or Tap`	Increases the value by 1
Increment `<Button>`	Input has focus and value is the maximum	`Click or Tap`	Value remains unchanged and shows `info-increment-disallowed` message

Code

Properties & Attributes

Property	Attribute	Description	Type	Default
`decrementButtonText`	`decrement-button-text`	Screen reader text for the decrement button	`string \| undefined`	`Minus ${this.step}`
`hintText`	`hint-text`	Text for the hint text	`string \| undefined`	`undefined`
`incrementButtonText`	`increment-button-text`	Screen reader text for the increment button	`string \| undefined`	`Plus ${this.step}`
`label`(required)	`label`	Populates native inside the component	`string`	`undefined`
`max`	`max`	Maximum value that the user can select	`string \| undefined`	`''`
`min`	`min`	Minimum value that the user can select	`string \| undefined`	`'0'`
`name`(required)	`name`	Input name	`string`	`undefined`
`parent`	`parent`	Sets the context	`string \| undefined`	`undefined`
`required`	`required`	Set to true to show an error when empty	`boolean \| undefined`	`false`
`value`	`value`	Value of the input	`string \| undefined`	`''`

Slots

Slot	Description	Permitted elements
`"error-required"`	Override the default error message when the input is required	`<p>`
`"error-not-a-number"`	Override the default error message when the value is not a number	`<p>`
`"error-under-range"`	Override the default error message when the value is over the number specified via the `min` attribute	`<p>`
`"error-over-range"`	Override the default error message when the value is over the number specified via the `max` attribute	`<p>`
`"info-decrement-disallowed"`	Override the information message when the user tries to reduce the value below the number specified via the `min` attribute using the input stepper controls	`<p>`
`"info-increment-disallowed"`	Override the information message when the user tries to increase the value over the number specified via the `max` attribute using the input stepper controls	`<p>`

Events

Event	Description	Type
`baChange`	Emit change event when the value changes	`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>

Parent components

ba-input-stepper can be slotted into:

Usage

Basic usage

A simple input stepper that has values between 0 and 10

<ba-input-stepper label="Label text" name="inputStepperName" max="10" required></ba-input-stepper>

Custom info and 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

An input stepper that has custom messages

<ba-input-stepper label="Label text" name="inputStepperName" min="10" max="20" required>
  <p slot="error-required">We need to know this. <a href="#">Why we need to know</a></p>
</ba-input-stepper>