- Boolean props are now prefixed by
is. - There is no longer a loading state.
iconprop has been renamed toprefix.wrapperPropsis not supported.validationStatewas renamed toisInvalid.minandmaxprops have been renamed tominValueandmaxValue.
NumberField
A number field is a specialized input that allows a user to enter a number.
Anatomy
Composed Components
A NumberField uses the following components.
Usage
Disabled
A number field in a disabled state shows that an input field exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a field may become available later.
ReadOnly
The isReadOnly prop makes the number field's content immutable. Unlike isDisabled, the number field remains focusable and the contents can still be copied. See the MDN docs for more information.
Sizes
Number fields have multiple sizes to choose from.
Labeling
If a visible label isn't specified, an aria-label must be provided to the number field for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the ID of the labeling element instead.
Description
A number field with a helper message.
Icon Prefix
An icon can be displayed at the start of the input.
Text Prefix
A short text can be displayed at the start of the input.
Error
A number field can be displayed in an error state to indicate that the user input is invalid.
Min Max
A number field can have a minimum and maximum value.
Formatting
A number field can be formatted using this format.
Fluid
A number field can take the width of its container.
Props
- prefix?
- size?
- isFluid?
- inputRef?
- necessityIndicator?
- inputGroupProps?
- style?
- validationBehavior?
- formatOptions?
- isDisabled?
- isReadOnly?
- isRequired?
- isInvalid?
- validate?
- autoFocus?
- value?
- defaultValue?
- onChange?
- minValue?
- maxValue?
- step?
- id?
- children?
- className?
- name?
An icon or text to display at the start of the input.
The size of the NumberField.
Defaults to md.
If true, the NumberField will take all available width.
Defaults to false.
A ref for the HTML input element.
Whether the required state should be shown as an asterisk or a label, which would display (Optional) on all non required field labels.
The props for the InputGroup.
The inline style for the element. A function may be provided to compute the style based on component state.
Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
Defaults to 'native'.
Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.
Whether the input is disabled.
Whether the input can be selected but not changed by the user.
Whether user input is required on the input before form submission.
Whether the input value is invalid.
A function that returns an error message if a given value is invalid.
Validation errors are displayed to the user when the form is submitted
if validationBehavior="native". For realtime validation, use the isInvalid
prop instead.
Whether the element should receive focus on render.
The current value (controlled).
The default value (uncontrolled).
Handler that is called when the value changes.
The smallest value allowed for the input.
The largest value allowed for the input.
The amount that the input value changes with each increment or decrement "tick".
The element's unique identifier. See MDN.
The children of the component. A function may be provided to alter the children based on component state.
The CSS className for the element. A function may be provided to compute the class based on component state.
The name of the input element, used when submitting an HTML form. See MDN.
- onFocus?
- onBlur?
- onFocusChange?
- onKeyDown?
- onKeyUp?
- onCopy?
- onCut?
- onPaste?
- onCompositionStart?
- onCompositionEnd?
- onCompositionUpdate?
- onSelect?
- onBeforeInput?
- onInput?
Handler that is called when the element receives focus.
Handler that is called when the element loses focus.
Handler that is called when the element's focus status changes.
Handler that is called when a key is pressed.
Handler that is called when a key is released.
Handler that is called when the user copies text. See MDN.
Handler that is called when the user cuts text. See MDN.
Handler that is called when the user pastes text. See MDN.
Handler that is called when a text composition system starts a new text composition session. See MDN.
Handler that is called when a text composition system completes or cancels the current text composition session. See MDN.
Handler that is called when a new character is received in the current text composition session. See MDN.
Handler that is called when text in the input is selected. See MDN.
Handler that is called when the input value is about to be modified. See MDN.
Handler that is called when the input value is modified. See MDN.
- decrementAriaLabel?
- incrementAriaLabel?
- isWheelDisabled?
- aria-label?
- aria-labelledby?
- aria-describedby?
- aria-details?
A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used.
A custom aria-label for the increment button. If not provided, the localized string "Increment" is used.
Enables or disables changing the value with scroll.
Defines a string value that labels the current element.
Identifies the element (or elements) that labels the current element.
Identifies the element (or elements) that describes the object.
Identifies the element (or elements) that provide a detailed, extended description for the object.
- slot?
A slot name for the component. Slots allow the component to receive props from a parent component.
An explicit null value indicates that the local props completely override all props received from a parent.