Number Input Field

Related components

NumberInputField renders a field composed of an NumberInput, a Label and a InlineMessage. It 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>

Appearance

NumberInputField supports appearance and emphasis props for visual variants, which are passed through to the underlying NumberInput.

<Form>
  <NumberInputField
    label="Standard"
    name="standard"
    appearance="standard"
    max={3}
    validation={{
      max: {
        value: 3,
        message: 'You cant have more than 3 cats'
      }
    }}
  />
  <NumberInputField
    label="Bold emphasis"
    name="bold"
    appearance="standard"
    emphasis="bold"
    css={{ mt: '$5' }}
    max={3}
    validation={{
      max: {
        value: 3,
        message: 'You cant have more than 3 cats'
      }
    }}
  />

  <Button type="submit" css={{ mt: '$5' }}>Submit</Button>
</Form>

API Reference

NumberInputField

Prop	Type	Default	Required
`appearance`	`"standard"` \| `"modern"`	-	-
`className`	`string`	-	-
`defaultValue`	`number`	`0`	-
`description`	`string`	-	-
`disabled`	`boolean`	-	-
`disabledTooltipContent`	`{ increment?: string \| undefined; decrement?: string \| undefined; }`	-	-
`emphasis`	`"bold"`	-	-
`hideLabel`	`boolean`	-	-
`label`	`string`	-
`max`	`number`	-	-
`min`	`number`	-	-
`name`	`string`	-
`onValueChange`	`(value: number) => void`	-	-
`prompt`	`{ link: string; label: string; }`	-	-
`readonly`	`boolean`	-	-
`size`	`"sm"` \| `"md"` \| `"lg"`	-	-
`step`	`number`	-	-
`stepperButtonLabels`	`{ increment?: string \| undefined; decrement?: string \| undefined; }`	-	-
`theme`	`"white"` \| `"grey"`	-	-
`validation`	`ValidationOptions`	-	-
`value`	`number`	-	-