A numeric input field with increment/decrement controls, value clamping, and keyboard support.
Importing
The component can be imported via:
Usage
A NumberField accepts a numeric value and an onChange callback that receives a number | undefined. When the input is empty, onChange is called with undefined.
Like other form components, the component requires a label (or an ariaLabel or ariaLabelledby).
Min, max, and step
The min and max props constrain the value. On blur, the value is clamped to these bounds. The step prop controls how much the value changes when using the increment/decrement controls or arrow keys. Defaults to 1.
Precision
Use the precision prop to control the number of decimal places displayed.
Hiding controls
Set withControls={false} to hide the increment/decrement buttons. Arrow key stepping still works.
Size
The size prop supports md (default) and sm.
Disabled
Error
Use the error prop for validation messages, or isInvalid for the red border alone.
API
PlumaNumberField extends TextField
Default:'input'
What element or component should be rendered.
Additional classes to be applied to the top-level container.
The maximum allowed value.
The minimum allowed value.
The blur event handler.
Called when the value changes. Receives undefined when the field is empty.
The focus event handler.
Placeholder text to show inside the field.
Default:0
Number of decimal places to display.
Default:md
The size of the input element.
Default:1
The amount to increment or decrement by.
Pluma internal property to set a component name used for logging.
Additional classes to be applied to the div that wraps the input element.
The current numeric value. Pass undefined for an empty field.
Default:true
Whether to show the increment/decrement controls.
Ember only: a modifier to apply on the input's wrapper element.
React only: a ref to the input's wrapper element.