Stepper / Dev

The name of the input. Mainly used to make the internal id of the component unique

The valid value range given as an chronological array of numbers

Floating range (integer between min and max): [min, max]

Fixed values: [min, B, C, D, ..., max]

Create a custom increments function. Here you can decide the amount it will increase or decrease for each button click. Default it looks like this:

((val, increment) => ((val + increment > 1000) ? 1000 : (val + increment > 100) ? 100 : (val + increment > 10) ? 10 : 1))

How the stepper should align itself in the container

Since the button uses symbols to convey visual meaning, you need to provide the decrease/increase-button with appropriate label. Try to provide a semantic message, that includes the unit (e.g. weeks, coupons, ...)

See ariaLabelButtonIncrease.

Provide a more semantic read-out when the value change for screen readers

For example: "1 uke" "2 uker" "4 kuponger"

Label for the (actual) number input.

If the user provides a invalid, too big/small or empty value, an inline error message will be shown under input. Provide a contextual message with the correct range (use the info-object to get the min, max values, for example)

Used together with onChange to control the input-component like a controlled component.

Disables the stepper both visually and interactively

Called for every value change. Typically for updating the value externally.

Important! The Stepper will return NaN on ALL invalid input (empty values, too big/small values and letters). If the value becomes invalid, the component will display an error message that you provide via the errorMessage-prop.

Use Number.isNaN(value) to check if the input is valid, for example:

{Number.isNaN(customWeekCount) && (
    <div>Value is in invalid</div>
  )
}

Custom suffix for the input