Skip to content

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

Free

Real-time Validation Form for Ark UI

Username and email checked on every keystroke, with Submit staying disabled until both fields pass.

Username and email show their errors as you type. Username needs 3 characters of letters, numbers, or underscores. Submit stays disabled until both fields pass.

Use it when waiting for a click would hide a typo. Checking once, on submit, is the usual Field pattern. In React, Ark UI does not disable Submit. The form state does.

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"
  noValidate
  onSubmit={form.handleSubmit(onSubmit)}
>
  <FieldGroup>
    <Controller
      control={form.control}
      name="username"
      render={({ field, fieldState }) => (
        <Field invalid={fieldState.invalid}>
          <FieldLabel>Username</FieldLabel>
          <Input {...field} placeholder="Enter username" />
          <FieldDescription>
            Validation happens as you type.
          </FieldDescription>
          <FieldError>{fieldState.error?.message}</FieldError>
        </Field>
      )}
    />
    <Controller
      control={form.control}
      name="email"
      render={({ field, fieldState }) => (
        <Field invalid={fieldState.invalid}>
          <FieldLabel>Email</FieldLabel>
          <Input {...field} placeholder="you@example.com" type="email" />
          <FieldDescription>
            Instant feedback on your input.
          </FieldDescription>
          <FieldError>{fieldState.error?.message}</FieldError>
{/* The rest of the file is under Installation. */}

FAQ

How does this form validate on each keystroke?

useForm sets mode: "onChange" with resolver: zodResolver(formSchema), so React Hook Form runs the schema on every change. The username description says "Validation happens as you type."

Why is Submit disabled?

The button has disabled={!form.formState.isValid}.It stays disabled until both fields pass, and isValid updates as the schema reruns on each change.

What username characters are allowed?

Letters, numbers and underscores, at least 3 of them: .min(3, "Username must be at least 3 characters") and .regex(/^[a-zA-Z0-9_]+$/, "Only letters, numbers, and underscores allowed"). The FieldError shows the first that fails.

What does the email field check?

email is z.email("Please enter a valid email address"). The Input is type="email" with placeholder you@example.com, and its description says "Instant feedback on your input."

What happens on the first empty paint?

Both fields start as "", which fails the schema, so Submit starts disabled. No error shows until a field changes.

What does a successful submit log?

Once isValid is true, Submit runs form.handleSubmit(onSubmit), which logs { email, username } to the console.

API Reference

Field

Sets invalid={fieldState.invalid} and orientation="horizontal". The rest is on the Field page.

Input

Sets field, placeholder="Enter username", placeholder="you@example.com" and type="email". The rest is on the Input page.

Button

Sets disabled={!form.formState.isValid} and type="submit". The rest is on the Button page.

All 42 form examples