Components

NumericStepper

En numeric stepper lar deg velge et antall av noe, som antall voksenbilletter eller sykler.

Examples

En enkel numeric stepper

<NumericStepper />

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

En kontrollert numeric stepper

En numeric stepper med minimums og maksimumsverdier

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

En numeric stepper i et skjema

<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">Send inn</Button>
</form>

En numeric stepper med en label (den bør ha en label)

<StaticCard padding={3} border borderWidth={1}>
  <Flex justifyContent="space-between" alignItems="center">
    <FormLabel htmlFor="stepper" margin={0}>
      Honnørbilletter
    </FormLabel>
    <NumericStepper id="stepper" />
  </Flex>
</StaticCard>

En numeric stepper kan også bruke en FormControl for å sende IDer rundt

<StaticCard padding={3} border borderWidth={1}>
  <FormControl>
    <Flex justifyContent="space-between" alignItems="center">
      <FormLabel margin={0}>
        Honnørbilletter
      </FormLabel>
      <NumericStepper />
    </Flex>
  </FormControl>
</StaticCard>

En disabled numeric stepper

<StaticCard padding={3} border borderWidth={1}>
  <FormControl>
    <Flex justifyContent="space-between" alignItems="center">
      <FormLabel margin={0}>
        Honnørbilletter
      </FormLabel>
      <NumericStepper isDisabled />
    </Flex>
  </FormControl>
</StaticCard>

En numeric stepper som går opp eller ned flere av gangen

<StaticCard padding={3} border borderWidth={1}>
  <FormControl>
    <Flex justifyContent="space-between" alignItems="center">
      <FormLabel margin={0}>
        Honnørbilletter
      </FormLabel>
      <NumericStepper stepSize={3} />
    </Flex>
  </FormControl>
</StaticCard>

En numeric stepper som viser tallet 0 når verdien er 0

<StaticCard padding={3} border borderWidth={1}>
  <FormControl>
    <Flex justifyContent="space-between" alignItems="center">
      <FormLabel margin={0}>
        Honnørbilletter
      </FormLabel>
      <NumericStepper showZero={true} />
    </Flex>
  </FormControl>
</StaticCard>