Site settings
Change the appearance of the site to suit your preferences
NumericStepper
A numeric stepper allows you to select a quantity of something, such as the number of adult tickets or bikes.
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>