NumberControl Edit

NumberControl is an enhanced HTML input[type="number] element.

Usage Usage

import { __experimentalNumberControl as NumberControl } from '@wordpress/components';

const Example = () => {
    const [ value, setValue ] = useState( 10 );

    return (
        <NumberControl
            isShiftStepEnabled={ true }
            onChange={ setValue }
            shiftStep={ 10 }
            value={ value }
        />
    );
};

Top ↑

Props Props

dragDirection dragDirection

Determines the drag axis to increment/decrement the value.
Directions: n | e | s | w

  • Type: String
  • Required: No
  • Default: n

Top ↑

dragThreshold dragThreshold

If isDragEnabled is true, this controls the amount of px to have been dragged before the value changes.

  • Type: Number
  • Required: No
  • Default: 10

Top ↑

hideHTMLArrows hideHTMLArrows

If true, the default input HTML arrows will be hidden.

  • Type: Boolean
  • Required: No
  • Default: false

Top ↑

isDragEnabled isDragEnabled

If true, enables mouse drag gesture to increment/decrement the number value. Holding SHIFT while dragging will increase the value by the shiftStep.

  • Type: Boolean
  • Required: No

Top ↑

isShiftStepEnabled isShiftStepEnabled

If true, pressing UP or DOWN along with the SHIFT key will increment the value by the shiftStep value.

  • Type: Boolean
  • Required: No
  • Default: true

Top ↑

shiftStep shiftStep

Amount to increment by when the SHIFT key is held down. This shift value is a multiplier to the step value. For example, if the step value is 5, and shiftStep is 10, each jump would increment/decrement by 50.

  • Type: Number
  • Required: No
  • Default: 10

Top ↑

step step

Amount to increment by when incrementing/decrementing.

  • Type: Number
  • Required: No
  • Default: 1