InputStepper

An input stepper is a two-segment UI control used to incrementally increase or decrease a numeric value.

Simple InputStepper

<InputStepper />
<InputStepper disabled defaultValue={100} />

Sizes

To have the larger or smaller switches, use the size property.

<InputStepper size="small" />
<InputStepper size="medium" />
<InputStepper size="large" />

Controlled InputStepper

You can use the value, and onChange properties to control the behaviour of the stepper.

import InputStepper from "@sonnat/ui/InputStepper";
import * as React from "react";

const Demo = () => {
  const [value, setValue] = React.useState("");

  return (
    <React.Fragment>
      <InputStepper value={value} onChange={newValue => void setValue(newValue)} />
      <span>The value is {`"${value}"`}</span>
    </React.Fragment>
  );
};

export default Demo;

API

Learn more about the properties and the customization points.

Usage

import InputStepper from "@sonnat/ui/InputStepper";

//or
import { InputStepper } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.