Info alert:Beta feature
This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.
Examples
Props
NumberInput
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | Additional classes added to the number input | |
| inputAriaLabel | string | No | 'Input' | Aria label of the input |
| inputName | string | No | Name of the input | |
| inputProps | any | No | Additional properties added to the text input | |
| isDisabled | boolean | No | false | Indicates the whole number input should be disabled |
| max | number | No | Maximum value of the number input, disabling the plus button when reached | |
| min | number | No | Minimum value of the number input, disabling the minus button when reached | |
| minusBtnAriaLabel | string | No | 'Minus' | Aria label of the minus button |
| minusBtnProps | ButtonProps | No | Additional properties added to the minus button | |
| onChange | (event: React.FormEvent<HTMLInputElement>) => void | No | Callback for the text input changing | |
| onMinus | (event: React.MouseEvent, name?: string) => void | No | Callback for the minus button | |
| onPlus | (event: React.MouseEvent, name?: string) => void | No | Callback for the plus button | |
| plusBtnAriaLabel | string | No | 'Plus' | Aria label of the plus button |
| plusBtnProps | ButtonProps | No | Additional properties added to the plus button | |
| unit | React.ReactNode | No | Adds the given unit to the number input | |
| unitPosition | 'before' | 'after' | No | 'after' | Position of the number input unit in relation to the number input |
| value | number | No | 0 | Value of the number input |
| widthChars | number | No | Sets the width of the number input to a number of characters |
CSS variables
| .pf-c-number-input | --pf-c-number-input__unit--c-input-group--MarginLeft | 0.5rem | |
| .pf-c-number-input | --pf-c-number-input__icon--FontSize | 0.75rem | |
| .pf-c-number-input | --pf-c-number-input--c-form-control--width-base | calc(0.5rem * 2) | |
| .pf-c-number-input | --pf-c-number-input--c-form-control--width-chars | 4 | |
| .pf-c-number-input | --pf-c-number-input--c-form-control--Width | calc(calc(0.5rem * 2) + 4 * 1ch) | |
View source on GitHub
