Skip to content

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

Free

Form with Textarea for Ark UI

A bio that must be 10 to 500 characters, written in a textarea with a live count of what is typed.

The bio is a textarea that does not resize. It must be 10 to 500 characters, and the line under it shows how many are typed, out of 500. Save checks the length.

Use it for a bio, a note, or any answer longer than one line. A single line belongs in an Input. In React, Ark UI does not cap the bio at 500.

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="bio"
      render={({ field, fieldState }) => (
        <Field invalid={fieldState.invalid}>
          <FieldLabel>Bio</FieldLabel>
          <Textarea
            {...field}
            className="resize-none"
            placeholder="Tell us a little about yourself"
            rows={5}
          />
          <FieldDescription className="tabular-nums">
            {field.value.length}/500 characters
          </FieldDescription>
          <FieldError>{fieldState.error?.message}</FieldError>
        </Field>
      )}
    />
    <Field orientation="horizontal">
      <Button type="submit">Save</Button>
    </Field>
  </FieldGroup>
</form>

FAQ

How is the bio textarea registered?

A Controller named bio spreads field onto the Textarea, which has rows={5}, resize-none and the placeholder "Tell us a little about yourself". defaultValues sets bio to "".

What length does the schema allow?

bio is .min(10) with "Bio must be at least 10 characters." and .max(500) with "Bio must not exceed 500 characters." The FieldError shows the one that fails.

How does the character count update?

The FieldDescription prints field.value.length followed by /500 characters, so it follows every keystroke. The length checks still wait for Save, because mode is the default, on submit.

What does an empty bio do?

"" fails .min(10), so Save shows "Bio must be at least 10 characters." The counter starts at 0/500 characters.

What is the order inside the field?

FieldLabel Bio, the Textarea, the FieldDescription with the count, then the FieldError, all in one Field marked invalid while the bio fails.

What does Save submit?

Save is a type="submit" button. form.handleSubmit(onSubmit) logs { bio } to the console after the length checks pass.

API Reference

Field

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

Textarea

Sets field, placeholder="Tell us a little about yourself" and rows={5}. The rest is on the Textarea page.

Button

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

All 42 form examples