Number Input Field

View source Report an issue Edit this page

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

Prop	Type	Default	Required
`css`	`CSSProperties`	-	-
`description`	`string`	-	-
`label`	`string`	-
`name`	`string`	-
`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; }`	-	-