Common Examples
import { NumberField } from "@servicetitan/anvil2";
function ExampleComponent() {
return <NumberField label="Quantity" />;
}
Default values
A default value can given to NumberField to use the field in an uncontrolled mode.Controlled usage
The NumberField can be controlled. This means you can maintain the state outside the component. Listen for new values with onChange and supply state back into the value prop.Empty
The NumberField allows not only 0, but also the ability for the input to be completely cleared out. This is represented by null in the onChange, value, and defaultValue props.Step value
The increment and decrement functionality of the NumberField defaults to adding or subtracting 1, but can be modified to add or subtract another number. This value applies to the visual +/- buttons as well as keyboard up/down keys.Note that step does not enforce that the value is a multiple of the step. Instead, it will add to or subtract from the current value.Additionally, the increment and decrement is clamped between the minimum and maximum values. This means if value + step > maxValue, the result of incrementing will be maxValue. Similarly, if value - step < minValue, the result will be minValue.Negative values
The NumberField defaults to a minimum of 0, but supports negative number inputs by setting a lower minValue.Fractional values
The NumberField defaults to integers, but supports decimal number inputs with the maximumFractionDigits and minimumFractionDigits props.Be careful! Forgetting to set minimumFractionDigits or maximumFractionDigits can result in your numbers being rounded unexpectedly.
Errors
Error messages can be applied to the component via the error prop.The component does not do validation internally. For example, it may be possible for a user to enter a value outside the minValue/maxValue without knowing it unless you provide an error message.
<NumberField
label="Quantity"
minValue={0}
maxValue={100}
step={1}
maximumFractionDigits={0}
minimumFractionDigits={0}
value={10}
defaultValue={0}
hideControls={false}
onChange={(value) => console.log(value)}
description="Enter a quantity"
error="Invalid value"
hint="Must be between 0 and 100"
size="medium"
loading={false}
disabled={false}
readOnly={false}
required={false}
placeholder="Enter quantity"
/>
NumberField Props
Properties
Default value for uncontrolled number field.
Whether to hide the increment/decrement buttons.
Maximum number of decimal places to display and allow.
Maximum allowed value for the number field.
Minimum number of decimal places to display.
Minimum allowed value for the number field.
onChange
(value: number | null) => void
Callback fired when the value changes.
Step value for increment/decrement operations.
Controlled value of the number field.
Additional field props
The component also support the following props which are common to most field components:Descriptive text displayed below the input field
Whether the number field is disabled
errorAriaLive
"off" | "polite" | "assertive"
default:"assertive"
ARIA live region setting for error announcements
error
ReactElement | string | boolean
Error message or element to display below the input
Hint text displayed below the input field
Label text displayed above the input field
Additional props to pass to the Label component
Whether to show a loading spinner in the input field
Additional information to display with the label
Placeholder text when no value is present
Whether the number field is read-only
Whether the number field is required
size
"small" | "medium" | "large"
default:"medium"
Size variant of the number field
