StepperControl Edit

StepperControl shows a stepper control to change a value wrapped in a StepperCell component.

Usage Usage

Usage example

import { StepperControl } from '@wordpress/components';
import { more } from '@wordpress/icons';

function Stepper( { onChange, value } ) {
    return (
        <StepperControl
            icon={ more }
            label="Columns"
            max={ 8 }
            min={ 1 }
            onChange={ onChange }
            value={ value }
        />
    );
}

Top ↑

Props Props

max max

Maximum value of the stepper.

  • Type: Number
  • Required: Yes
  • Platform: Mobile

Top ↑

min min

Minimum value of the stepper.

  • Type: Number
  • Required: Yes
  • Platform: Mobile

Top ↑

step step

Step increment value.

  • Type: Number
  • Required: No
  • Platform: Mobile

Top ↑

value value

Current value of the stepper.

  • Type: Number
  • Required: Yes
  • Platform: Mobile

Top ↑

onChange onChange

Callback called when the value has changed

  • Type: Function
  • Required: Yes
  • Platform: Mobile

The argument of the callback is the updated value as a Number.