Spinbutton

Numeric input with increment/decrement buttons.

Usage

<w-spinbutton value="5" min="0" max="10" label="Quantity">
  <w-slot down><button>-</button></w-slot>
  <w-slot input><input type="text" /></w-slot>
  <w-slot up><button>+</button></w-slot>
</w-spinbutton>

Props

Prop	Type	Default	Description
value	number	0	Current value
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Increment/decrement amount
label	string	""	Accessible label
disabled	boolean	false	Disable input

Slots

Slot	Element	Description
input	Input	Text input for the value
increment	Button	Increase value button
decrement	Button	Decrease value button

Events

Event	Detail	Description
change	{ value }	Value changed

Keyboard

Key	Action
ArrowUp	Increment value
ArrowDown	Decrement value
Home	Set to minimum
End	Set to maximum
PageUp	Increment by step * 10
PageDown	Decrement by step * 10

Styling

The host is display: inline-flex with center alignment by default. The increment/decrement buttons get aria-disabled when at the bounds (unless wrap is set).

w-spinbutton {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.25rem;
}

w-spinbutton w-slot[input] > * {
  width: 60px;
  text-align: center;
  border: none;
}
w-spinbutton w-slot[up] > *,
w-spinbutton w-slot[down] > * {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

/* At-bound state */
w-spinbutton w-slot[up] > *[aria-disabled="true"],
w-spinbutton w-slot[down] > *[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Disabled */
w-spinbutton[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

Selector	Targets
w-spinbutton[disabled]	Disabled spinbutton
w-spinbutton w-slot[up] > *[aria-disabled="true"]	Disabled increment (at max)
w-spinbutton w-slot[down] > *[aria-disabled="true"]	Disabled decrement (at min)

Accessibility

• Input has role="spinbutton"
• aria-valuenow, aria-valuemin, aria-valuemax
• aria-label from label prop
• Buttons properly labeled