NumberInputField renders a field composed of an NumberInput, a Label and a InlineMessage

NumberInputField is the preferred way to render a form field for a number input.

In addition to text Label (required) and a validation error (optional), NumberInputField accepts all the same props as NumberInput and will pass them on to the NumberInput it renders.

<Form>
<NumberInputField
label="Number of cats"
name="cats"
min={3}
validation={{
min: {
value: 3,
message: 'You must have at least 3 cats!'
}
}}
/>
</Form>

API Reference

PropTypeDefaultRequired
cssCSSProperties

-

-

description
string

-

-

labelstring

-

namestring

-

prompt
{ link: string; label: string; }

-

-

validation
ValidationOptions

-

-

min
number

-

-

max
number

-

-

step
number

-

-

initialValue
number

-

-

disabled
boolean

-

-

readonly
boolean

-

-

size
"sm" | "md"

-

-

onChange
(value: number) => void

-

-

stepperButtonLabels
{ increment?: string | undefined; decrement?: string | undefined; }

-

-

disabledTooltipContent
{ increment?: string | undefined; decrement?: string | undefined; }

-

-