Skip to main content

Stepper

Stepper in Storybook

Examples​

Check out the Usage section for details about how to design a stepper properly, and the different configuration options we provide.

Enter a number​

You can allow the user to enter a number using the Stepper component. Then use the handler to get the selected number.

import { Stepper } from '@jutro/components/new';

// ...

<Stepper
  label="Enter Number"
  name="Number picker"
/>;

Enter a number with restrictions​

You can limit the range of numbers to select using the min and max properties. These are inclusive limits.

import { Stepper } from '@jutro/components/new';

// ...

<Stepper
  label="Enter Number"
  secondaryLabel="From 1 to 10 inclusive"
  min={1}
  max={10}
/>;

Custom Validation Message​

Stepper does not provide a specific validation logic but it provides the way to include the developer validation and use the stateMessages property to display any required error message.

This is an example of handling validation when onChange event is triggered. Enter a value below 0 or above 10 without using the buttons to test it.

export function StepperValidation() {
  const [validationMessages, setValidationMessages] = useState({});
  const max = 10;
  const min = 0;

  const onChange = useCallback((e, newValue) => {
    setValidationMessages({});

    if (newValue && (newValue > max || newValue < min)) {
      setValidationMessages({
        error: ['Value must be between 0 and 10'],
      });
    }
  }, []);

  return (
    <JutroWrapper>
      <div style={{ padding: '2rem 1rem' }}>
        <Stepper
          label="Enter Number"
          secondaryLabel="From 1 to 10 inclusive"
          onChange={handleChange}
          stateMessages={validationMessages}
          min={min}
          max={max}
        />
      </div>
    </JutroWrapper>
  );
}