Examples
With unit and thresholds
To enable a user entered value to snap to the nearest threshold if the entered input is out of bounds, define the blur event handler.
With a minimum value of 0 and maximum value of 10
%
With status
In the following example, the validated status will update based on the value of the number input and how far from the number 5 it is.
Props
NumberInput
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | Additional classes added to the number input | |
| inputAriaLabel | string | 'Input' | Aria label of the input |
| inputName | string | Name of the input | |
| inputProps | any | Additional properties added to the text input | |
| isDisabled | boolean | false | Indicates the whole number input should be disabled |
| max | number | Maximum value of the number input, disabling the plus button when reached | |
| min | number | Minimum value of the number input, disabling the minus button when reached | |
| minusBtnAriaLabel | string | 'Minus' | Aria label of the minus button |
| minusBtnProps | ButtonProps | Additional properties added to the minus button | |
| onBlur | (event?: any) => void | Callback function when text input is blurred (focus leaves) | |
| onChange | (event: React.FormEvent<HTMLInputElement>) => void | Callback for the text input changing | |
| onMinus | (event: React.MouseEvent, name?: string) => void | () => {} | Callback for the minus button |
| onPlus | (event: React.MouseEvent, name?: string) => void | () => {} | Callback for the plus button |
| plusBtnAriaLabel | string | 'Plus' | Aria label of the plus button |
| plusBtnProps | ButtonProps | Additional properties added to the plus button | |
| unit | React.ReactNode | Adds the given unit to the number input | |
| unitPosition | 'before' | 'after' | 'after' | Position of the number input unit in relation to the number input |
| validated | 'default' | 'error' | 'warning' | 'success' | ValidatedOptions | ValidatedOptions.default | Value to indicate if the input is modified to show that validation state |
| value | number | '' | 0 | Value of the number input |
| widthChars | number | Sets the width of the number input to a number of characters |
CSS variables
| Expand or collapse column | Selector | Variable | Value |
|---|
