Code

Implementation
NumberField Props

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.

Demo

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.

Demo

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.

Demo

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.

Demo

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.

Demo

Negative values

The NumberField defaults to a minimum of 0, but supports negative number inputs by setting a lower minValue.

Demo

Fractional values

The NumberField defaults to integers, but supports decimal number inputs with the maximumFractionDigits and minimumFractionDigits props.

$numberfield-minimumfractiondigits$

Demo

Be careful! Forgetting to set minimumFractionDigits or maximumFractionDigits can result in your numbers being rounded unexpectedly.

Demo

Caution

Errors

Error messages can be applied to the component via the error prop.

Demo

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.

Demo

Caution

<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

defaultValue

number | null

Default value for uncontrolled number field.

hideControls

boolean

default:"false"

Whether to hide the increment/decrement buttons.

maximumFractionDigits

number

default:"0"

Maximum number of decimal places to display and allow.

maxValue

number

Maximum allowed value for the number field.

minimumFractionDigits

number

default:"0"

Minimum number of decimal places to display.

minValue

number

Minimum allowed value for the number field.

onChange

(value: number | null) => void

Callback fired when the value changes.

step

number

default:"1"

Step value for increment/decrement operations.

value

number | null

Controlled value of the number field.

Additional field props

The component also support the following props which are common to most field components:

description

string

Descriptive text displayed below the input field

disabled

boolean

default:"false"

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

string

Hint text displayed below the input field

label

string

Label text displayed above the input field

labelProps

object

Additional props to pass to the Label component

boolean

default:"false"

Whether to show a loading spinner in the input field

moreInfo

string

Additional information to display with the label

placeholder

string

Placeholder text when no value is present

prefix

string | ReactElement

readOnly

boolean

default:"false"

Whether the number field is read-only

required

boolean

default:"false"

Whether the number field is required

size

"small" | "medium" | "large"

default:"medium"

Size variant of the number field

suffix

string | ReactElement

Anvil2 Web

Resources

Common Examples

Default values

Controlled usage

Empty

Step value

Negative values

Fractional values

Errors

`NumberField` Props

Properties

Additional field props

Anvil2 Web

Resources

​Common Examples

​Default values

​Controlled usage

​Empty

​Step value

​Negative values

​Fractional values

​Errors

​NumberField Props

​Properties

​Additional field props

Common Examples

Default values

Controlled usage

Empty

Step value

Negative values

Fractional values

Errors

`NumberField` Props

Properties

Additional field props