Skip to content

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

Free

Min/Max Length Validation Form for Ark UI

A username held to 3 to 20 characters and a bio of 10 to 160, with a live character count under the bio.

Username must be 3 to 20 characters. Bio must be 10 to 160, and the line under it counts what you have typed, out of 160. Save checks both lengths.

Use it for usernames, bios, and other capped text. A long note with no limit is a Textarea. In React, Ark UI does not count the characters.

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>3-20 characters required.</FieldDescription>
          <FieldError>{fieldState.error?.message}</FieldError>
        </Field>
      )}
    />
    <Controller
      control={form.control}
      name="bio"
      render={({ field, fieldState }) => (
        <Field invalid={fieldState.invalid}>
          <FieldLabel>Bio</FieldLabel>
          <Input {...field} placeholder="Tell us about yourself" />
          <FieldDescription className="tabular-nums">
            10-160 characters. {field.value.length}/160
          </FieldDescription>
          <FieldError>{fieldState.error?.message}</FieldError>
        </Field>
      )}
{/* The rest of the file is under Installation. */}

FAQ

What length is the username held to?

.min(3, "Username must be at least 3 characters") and .max(20, "Username must not exceed 20 characters"). Its FieldDescription says "3-20 characters required." and the FieldError shows whichever rule fails.

What length is the bio held to?

.min(10, "Bio must be at least 10 characters") and .max(160, "Bio must not exceed 160 characters"). Bio is a single-line Input, not a textarea, with the placeholder "Tell us about yourself".

How does the 160 counter update?

The bio's FieldDescription prints field.value.length after "10-160 characters.", so it follows every keystroke. The length messages still wait for Save, because mode is the default, on submit.

What are the starting strings?

defaultValues sets bio and username to "", so the counter starts at 0/160 and an empty submit fails both minimums.

How are the fields registered?

Each field is a Controller with control={form.control} and its name, which spreads field onto the Input and passes fieldState.invalid to the Field. The resolver is zodResolver(formSchema).

What does Save log?

Save is a type="submit" button. Once both lengths are in range, onSubmit logs { bio, 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" and placeholder="Tell us about yourself". The rest is on the Input page.

Button

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

All 42 form examples