Number Input Field

Related components

NumberInputField renders a NumberInput (a number with − and + buttons) with a Label, an optional description and prompt, and an error message. It is the preferred way to ask for a small whole number.

NumberInputField accepts all the props of NumberInput and passes them on. defaultValue is 0 unless you set it. The − and + buttons are disabled at min and max.

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}}>
    <NumberInputField
      name="groupSize"
      label="Pupils per group"
      min={2}
      max={6}
      defaultValue={4}
      appearance="modern"
    />
  </Form>
</div>

Appearance

standard (default) has a white field and buttons with grey-700 borders. modern has filled backgrounds and no borders.

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}}>
    <div className="flex w-80 flex-col gap-6">
      <NumberInputField label="Pupils per group" min={2} max={6} defaultValue={4} name="standard" appearance="standard" />
      <NumberInputField label="Pupils per group" min={2} max={6} defaultValue={4} name="modern" appearance="modern" />
    </div>
  </Form>
</div>

Theme

With appearance="modern", use theme="grey" on white surfaces and theme="white" on grey surfaces.

<Form onSubmit={() => {}}>
  <div className="flex flex-col gap-4">
    <div className="w-80 rounded-md border border-grey-200 bg-white p-6">
      <NumberInputField label="Pupils per group" min={2} max={6} defaultValue={4} name="grey" appearance="modern" theme="grey" />
    </div>
    <div className="w-80 rounded-md bg-grey-100 p-6">
      <NumberInputField label="Pupils per group" min={2} max={6} defaultValue={4} name="white" appearance="modern" theme="white" />
    </div>
  </div>
</Form>

Emphasis

emphasis="bold" gives the buttons a primary colour. Use it only where the number is the main task on screen.

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}}>
    <div className="flex w-80 flex-col gap-6">
      <NumberInputField name="standardBold" label="Standard, bold" emphasis="bold" min={2} max={6} defaultValue={4} />
      <NumberInputField name="modernBold" label="Modern, bold" appearance="modern" emphasis="bold" min={2} max={6} defaultValue={4} />
    </div>
  </Form>
</div>

Size

sm, md (default) and lg.

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}}>
    <div className="flex w-80 flex-col gap-6">
      <NumberInputField min={2} max={6} defaultValue={4} name="sm" size="sm" appearance="modern" label="Size sm" />
      <NumberInputField min={2} max={6} defaultValue={4} name="md" size="md" appearance="modern" label="Size md" />
      <NumberInputField min={2} max={6} defaultValue={4} name="lg" size="lg" appearance="modern" label="Size lg" />
    </div>
  </Form>
</div>

States

At min or max, the matching button is disabled and shows a tooltip. Use disabledTooltipContent to explain why in plain words.

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}} appearance="modern">
    <div className="flex w-80 flex-col gap-6">
      <NumberInputField
        name="atMax"
        label="At maximum"
        min={2}
        max={6}
        defaultValue={6}
        disabledTooltipContent={{ increment: 'Groups can have up to 6 pupils' }}
      />
      <NumberInputField name="readonly" label="Read-only" defaultValue={4} readonly />
      <NumberInputField name="disabled" label="Disabled" defaultValue={4} disabled />
    </div>
  </Form>
</div>

Error

const ShowErrors = ({ trigger }) => {
  React.useEffect(() => {
    trigger()
  }, [trigger])
  return null
}

render(
  <Form onSubmit={() => {}}>
    {({ trigger }) => (
      <div className="flex w-96 flex-col gap-6 rounded-md bg-white p-8">
        <NumberInputField
          name="standard"
          label="Pupils per group (standard)"
          defaultValue={1}
          validation={{ min: { value: 2, message: 'Groups need at least 2 pupils' } }}
        />
        <NumberInputField
          name="modern"
          label="Pupils per group (modern)"
          appearance="modern"
          defaultValue={1}
          validation={{ min: { value: 2, message: 'Groups need at least 2 pupils' } }}
        />
        <ShowErrors trigger={trigger} />
      </div>
    )}
  </Form>
)

Description

<div className="rounded-md bg-white p-8">
  <Form onSubmit={() => {}} appearance="modern">
    <NumberInputField
      name="groupSize"
      label="Pupils per group"
      description="Between 2 and 6 pupils."
      min={2}
      max={6}
      defaultValue={4}
    />
  </Form>
</div>