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