Number Stepper

npm2.0.0

A number input with explicit increment/decrement buttons in a horizontal minus-input-plus layout

A number input with explicit increment/decrement buttons in a horizontal minus-input-plus layout. This component provides a more touch-friendly and visually explicit interface for numeric input compared to standard number inputs.

Example

Quantity

Select quantity

code

<script type="module">
  import '@blueprintui/components/include/number-stepper.js';
</script>

<bp-field>
  <label>Quantity</label>
  <bp-number-stepper value="1" min="0" max="10" step="1"></bp-number-stepper>
  <bp-field-message>Select quantity</bp-field-message>
</bp-field>

Continuous

Volume (Hold to repeat)

Hold buttons to adjust quickly

Brightness (Hold to repeat)

code

<bp-form-group layout="vertical">
  <bp-field>
    <label>Volume (Hold to repeat)</label>
    <bp-number-stepper value="50" min="0" max="100" continuous continuous-delay="300" continuous-interval="50"></bp-number-stepper>
    <bp-field-message>Hold buttons to adjust quickly</bp-field-message>
  </bp-field>

  <bp-field>
    <label>Brightness (Hold to repeat)</label>
    <bp-number-stepper value="75" min="0" max="100" continuous></bp-number-stepper>
  </bp-field>
</bp-form-group>

Disabled

code

<bp-form-group layout="vertical">
  <bp-field>
    <label>Disabled</label>
    <bp-number-stepper value="5" min="0" max="10" disabled></bp-number-stepper>
  </bp-field>
</bp-form-group>

Validation

Team Size

Minimum team size is 1

Maximum team size is 10

code

<bp-form-group layout="vertical">
  <bp-field validate>
    <label>Team Size</label>
    <bp-number-stepper value="5" min="1" max="10" required></bp-number-stepper>
    <bp-field-message error="rangeUnderflow">Minimum team size is 1</bp-field-message>
    <bp-field-message error="rangeOverflow">Maximum team size is 10</bp-field-message>
  </bp-field>
</bp-form-group>

Vertical

Quantity

Select quantity

Price

code

<bp-form-group layout="vertical">
  <bp-field>
    <label>Quantity</label>
    <bp-number-stepper value="1" min="0" max="10"></bp-number-stepper>
    <bp-field-message>Select quantity</bp-field-message>
  </bp-field>

  <bp-field>
    <label>Price</label>
    <bp-number-stepper value="100" min="0" max="1000" step="10"></bp-number-stepper>
  </bp-field>
</bp-form-group>

Horizontal

Width

Height

code

<bp-form-group layout="horizontal">
  <bp-field>
    <label>Width</label>
    <bp-number-stepper value="800" min="100" max="1920" step="10"></bp-number-stepper>
  </bp-field>

  <bp-field>
    <label>Height</label>
    <bp-number-stepper value="600" min="100" max="1080" step="10"></bp-number-stepper>
  </bp-field>
</bp-form-group>

Compact

Rows

Columns

code

<bp-form-group layout="compact">
  <bp-field>
    <label>Rows</label>
    <bp-number-stepper value="10" min="1" max="100"></bp-number-stepper>
  </bp-field>

  <bp-field>
    <label>Columns</label>
    <bp-number-stepper value="10" min="1" max="100"></bp-number-stepper>
  </bp-field>
</bp-form-group>

Install

NPM

// npm package
import '@blueprintui/components/include/number-stepper.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/number-stepper.js/+esm';
</script>

Accessibility

Keyboard Navigation: Tab to focus input, arrow keys work within input, Space/Enter activate focused stepper buttons
ARIA Attributes: Stepper buttons have aria-label="increment" and aria-label="decrement", input has role="spinbutton" with aria-valuemin, aria-valuemax, aria-valuenow
Button States: Decrement button disabled at min value, increment button disabled at max value
Focus Management: Clear focus indicators on input and buttons
Screen Reader: Announces current value and button availability

Behavior Notes

Button States: Decrement button automatically disables when value reaches min, increment button disables at max
Validation: Manual input is validated against min, max, and step values
Keyboard Shortcuts: When input is focused, arrow up/down increment/decrement by step value
Continuous Stepping: When continuous is enabled, holding a button will repeatedly increment/decrement

bp-number-stepper

Events

Name	Types	Description
`input`	`InputEvent`	occurs when the value changes (real-time, during typing)
`change`	`InputEvent`	occurs when value is committed (blur, enter, or button click)

Properties

Name	Types	Description
`continuous`	`boolean`	enable hold-to-repeat on stepper buttons
`continuousDelay`	`number`	delay in ms before continuous stepping starts
`continuousInterval`	`number`	interval in ms for continuous stepping
`i18n`	`I18nStrings['actions']`	Provides internationalization strings for accessibility labels and screen reader announcements
`focus`
`blur`
`stepUp`		Increments the value by the step amount
`stepDown`		Decrements the value by the step amount
`value`	`number`
`step`	`number`

Attributes

Name	Types	Description
`continuous`	`boolean`	enable hold-to-repeat on stepper buttons
`continuous-delay`	`number`	delay in ms before continuous stepping starts
`continuous-interval`	`number`	interval in ms for continuous stepping
`i18n`	`I18nStrings['actions']`	Provides internationalization strings for accessibility labels and screen reader announcements

CSS Properties

Name	Types	Description
`--background`		Background color of input field
`--color`		Text color
`--border`		Border style
`--border-radius`		Border radius
`--outline`		Outline style (focus state)
`--outline-offset`		Outline offset
`--padding`		Input field padding
`--font-size`		Font size
`--height`		Component height
`--width`		Component width
`--min-width`		Minimum width
`--gap`		Gap between elements
`--text-align`		Text alignment in input field