Spinbutton

Spinbutton

Numeric input with increment/decrement buttons.

Based on APG Spinbutton Pattern.

Demo

Quantity
5

Usage

let quantity = @resource.signal(5.0)

@styled_spinbutton.spinbutton(
  quantity,
  min=0.0,
  max=100.0,
  step=1.0,
  label="Quantity",
)

Props

PropTypeDefaultDescription
valueSignal[Double]-Current value
minDouble?NoneMinimum value
maxDouble?NoneMaximum value
stepDouble1.0Step increment
large_stepDouble?step*10Page step
disabledBoolfalseDisable input
aria_labelString?NoneAccessible label
labelString?NoneVisible label
classString?NoneAdditional CSS class

BEM Classes

ClassDescription
.spinbuttonRoot wrapper
.spinbutton__labelLabel text
.spinbutton__controlsButton + input container
.spinbutton__buttonIncrement/decrement button
.spinbutton__decrementDecrement button modifier
.spinbutton__incrementIncrement button modifier
.spinbutton__inputValue display

Keyboard

KeyAction
Arrow UpIncrease by step
Arrow DownDecrease by step
Page UpIncrease by large step
Page DownDecrease by large step
HomeSet to minimum
EndSet to maximum