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 }
/>
);
};
Props Props
dragDirection dragDirection
Determines the drag axis to increment/decrement the value.
Directions: n | e | s | w
- Type:
String - Required: No
- Default:
n
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
hideHTMLArrows hideHTMLArrows
If true, the default input HTML arrows will be hidden.
- Type:
Boolean - Required: No
- Default:
false
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
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
label label
If this property is added, a label will be generated using label property as the content.
- Type:
String - Required: No
labelPosition labelPosition
The position of the label (top, side, bottom, or edge).
- Type:
String - Required: No
max max
The maximum value allowed.
- Type:
Number - Required: No
- Default:
Infinity
min min
The minimum value allowed.
- Type:
Number - Required: No
- Default:
-Infinity
required required
If true enforces a valid number within the control’s min/max range. If false allows an empty string as a valid value.
- Type:
Boolean - Required: No
- Default:
false
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
step step
Amount by which the value is changed when incrementing/decrementing. It is also a factor in validation as value must be a multiple of step (offset by min, if specified) to be valid. Accepts the special string value any that voids the validation constraint and causes stepping actions to increment/decrement by 1.
- Type:
Number | "any" - Required: No
- Default:
1