Skip to content

SpinButton

a primitive for creating a SpinButton component.

Anatomy

Figure: Anatomy of a SpinButton component

API Reference

createSpinbutton<T extends string | number>(args: SpinButtonArguments<T>): AriaSpinButton<T>;

Parameters [SpinButtonArguments]

Name	Type	Default	Description
values *	`Array<T extends string \| number>`	-	The values to cycle through.
mapping	`string[]`	-	Values to be mapped to a value if not descriptive enough.
step	`number`	1	Changes the amount of items to increment or decrement by when using page up or page down keys.

Return value [AriaSpinButton]

Name	Type	Description
decrementButtonProps *	`JSX.HTMLAttributes<HTMLButtonElement>`	Props to spread on the decrement button element.
incrementButtonProps *	`JSX.HTMLAttributes<HTMLButtonElement>`	Props to spread on the increment button element.
inputProps *	`JSX.HTMLAttributes<HTMLInputElement>`	Props to spread on the input element.
state *	`{ value: T }`	The current state of the SpinButton component.

Example

Playground
Code

import { createSpinbutton } from "solid-apg/spinbutton";

import type { VoidComponent } from "solid-js";

export const SpinButton: VoidComponent = () => {
  const { props, incrementButtonProps, decrementButtonProps, state } = createSpinbutton({
    values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    mapping: [
      "monday",
      "tuesday",
      "wednesday",
      "thursday",
      "rockstar",
      "every",
      "day",
      "friday",
      "saturday",
      "sunday"
    ],
    step: 5
  });

  return (
    <div class="flex flex-col gap-2">
      <button
        class="bg-green-600 hover:bg-green-700 active:bg-green-800 transition-colors p-4"
        {...incrementButtonProps}
      >
        <span class="font-bold">+</span>
        <span class="sr-only">Increment</span>
      </button>
      <input class="p-4" type="text" {...props} value={state.value} />
      <button
        class="bg-red-600 hover:bg-red-700 active:bg-red-800 transition-colors p-4"
        {...decrementButtonProps}
      >
        <span class="font-bold">-</span>
        <span class="sr-only">Decrement</span>
      </button>
    </div>
  );
};