Components

NumericStepper

A numeric stepper allows you to select a quantity of something, such as the number of adult tickets or bikes.

Examples

A simple numeric stepper

<NumericStepper />

A controlled numeric stepper

() => {
  const [count, setCount] = React.useState(7);
  return (
    <NumericStepper value={count} onValueChange={setCount} />
  );
}

Disabled stepper

<NumericStepper disabled />

Stepper with error state, for form validation

<NumericStepper invalid errorText="Invalid choice" />

A numeric stepper with minimum and maximum values.

<NumericStepper minValue={-5} maxValue={5} />

A numeric stepper in a form

<form onSubmit={(e) => { 
  e.preventDefault();
    alert(`Du sendte inn ${new FormData(e.target).get("counter")}`)
  }}
>
  <NumericStepper name="counter" marginBottom={3} />
  <Button type="submit" variant="primary" size="sm" marginTop="2">Send inn</Button>
</form>

A numeric stepper with a label (it should have a label)

<Flex justifyContent="space-between" alignItems="center">
  <Box as="label" htmlFor="stepper" margin={0}>
    Honnørbilletter
  </Box>
  <NumericStepper id="stepper" />
</Flex>

A numeric stepper that increments or decrements by multiple values at a time.

<Flex justifyContent="space-between" alignItems="center">
  <Box as="label" htmlFor="stepper" margin={0}>
    Honnørbilletter
  </Box>
  <NumericStepper id="stepper" stepSize={3} />
</Flex>

A numeric stepper that show the number 0 when the value is 0

<Flex justifyContent="space-between" alignItems="center">
  <Box as="label" htmlFor="stepper" margin={0}>
    Honnørbilletter
  </Box>
  <NumericStepper id="stepper" showZero={true} />
</Flex>

Guidelines

A numeric stepper is a component used to make it easy to select a quantity of something. A typical example is the number of tickets of a given type or the number of stroller spots one wishes to reserve.

You can click on the number to enter a value manually if desired, or use the arrow keys to increase or decrease the value.

Code

`<NumericStepper />`

import { NumericStepper } from "@vygruppen/spor-react";

Props

Name	Type	Description
`name`	`string`	The name of the input field
`value`	`number`	The controlled value
`onChange`	`(nextValue: number) => void`	Callback for when the value changes via buttons or input field
`minValue`	`number`	Defaults to 0
`maxValue`	`number`	Defaults to 99
`stepSize`	`number`	The amount to increment or decrement by. Defaults to 1.
`showZero`	`boolean`	Whether to display the number 0 when the value is 0. Defaults to false.
`disabled`	`boolean`
`invalid`	`boolean`

Fundamentals

Getting started