Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Number Input Form for React

One age field, typed as a number, that only submits ages from 18 to 120 when you press Verify Age.

Age is a number field that starts empty. Under 18 shows You must be at least 18 years old. Over 120 shows Please enter a valid age. The note says you must be 18 or older.

Use it when the value is a number with a floor and a ceiling. A free number with no range is a plain Input. In React, Base UI does not enforce 18 or 120.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

<form className="w-full max-w-md" onSubmit={form.handleSubmit(onSubmit)}>
  <FieldGroup>
    <Controller
      control={form.control}
      name="age"
      render={({ field, fieldState }) => (
        <Field invalid={fieldState.invalid}>
          <FieldLabel htmlFor="number-input-form-age">Age</FieldLabel>
          <Input
            id="number-input-form-age"
            name={field.name}
            onBlur={field.onBlur}
            onChange={(event) =>
              field.onChange(
                event.target.value === ""
                  ? undefined
                  : Number(event.target.value)
              )
            }
            placeholder="25"
            ref={field.ref}
            type="number"
            value={field.value ?? ""}
          />
          <FieldDescription>
            You must be 18 or older to continue.
          </FieldDescription>
          <FieldError>{fieldState.error?.message}</FieldError>
        </Field>
      )}
    />
{/* The rest of the file is under Installation. */}

FAQ

How does the string become a number?

The Controller doesn't spread field here. The Input's onChange passes undefined for an empty box and Number(event.target.value) otherwise, and value is field.value ?? "". The schema is z.number() with .min(18, "You must be at least 18 years old.") and .max(120, "Please enter a valid age.").

What happens if age is left blank?

defaultValues sets age to undefined, and clearing the box sets it back. undefined isn't a number, so submit fails with "You must be at least 18 years old.", the message passed to z.number().

What does type number change?

The Input sets type="number" and the placeholder 25, so phones show a numeric keyboard and the browser only lets numbers in. It also passes name, onBlur and ref from field so React Hook Form can track and focus it.

Where is the age rule explained before submit?

FieldDescription says "You must be 18 or older to continue." FieldError below it shows the minimum or maximum message after a failed submit.

What does Verify Age submit?

Verify Age is a type="submit" button. form.handleSubmit(onSubmit) runs the schema and calls onSubmit with age as a number, which the demo logs.

When do the min and max checks run?

mode is unset, so they first run on submit. After a failed submit, React Hook Form checks again as the number changes, and the error clears once the age is in range.

API Reference

Field

Sets invalid={fieldState.invalid}, htmlFor="number-input-form-age" and orientation="horizontal". The rest is on the Field page.

Input

Sets id="number-input-form-age", name={field.name}, onBlur={field.onBlur}, onChange and event. The rest is on the Input page.

Button

Sets type="submit". The rest is on the Button page.

All 42 form examples