Examples
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 | |
| 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 |
| value | number | 0 | Value of the number input |
| widthChars | number | 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
