Skip to content

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

Free

Conditional Validation Form for Ark UI

Company name and website show up only after I have a company is checked, and then the name is required.

The form starts as one checkbox, I have a company. Checking it reveals Company Name and an optional website. The name must be at least 2 characters only while that box is on.

Use it when a section applies to some people and not others. Fields that are always visible can stay on a plain Input. In React, Ark UI does not hide the fields. The checkbox 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="hasCompany"
      render={({ field, fieldState }) => (
        <Field invalid={fieldState.invalid} orientation="horizontal">
          <Checkbox
            checked={field.value}
            name={field.name}
            onCheckedChange={({ checked }) =>
              field.onChange(checked === true)
            }
          />
          <FieldContent>
            <FieldLabel>I have a company</FieldLabel>
            <FieldDescription>
              Check this if you represent a company.
            </FieldDescription>
          </FieldContent>
        </Field>
      )}
    />
    {hasCompany ? (
      <>
        <Controller
          control={form.control}
{/* The rest of the file is under Installation. */}

FAQ

How do the company fields appear?

useWatch({ control: form.control, name: "hasCompany" }) returns the checkbox's current value, and the Company Name and Company Website fields render only while it's true. The box starts unchecked from defaultValues.

How is the checkbox connected?

A horizontal Field holds the Checkbox, then a FieldContent with the label I have a company and the description "Check this if you represent a company." checked={field.value}, and onCheckedChange passes checked === true to field.onChange.

When is the company name required?

The schema's refine passes when hasCompany is false, or when companyName has at least 2 characters. Otherwise it fails with "Company name is required" on path: ["companyName"], so the error lands in that field's FieldError.

What does the website field accept?

companyWebsite is z.url().optional().or(z.literal("")): empty passes, anything else has to be a URL, and a bad one shows Zod's default "Invalid URL". The label says Company Website (Optional).

Does hiding the fields drop their values?

No. Unchecking the box only stops rendering them; their values stay in the form. A website that isn't a URL still fails on submit, while the name rule stops applying once hasCompany is false.

What does Submit log?

Submit is a type="submit" button. On submit, form.handleSubmit(onSubmit) runs the schema and the refine, then logs { companyName, companyWebsite, hasCompany } to the console.

API Reference

Field

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

Checkbox

Sets checked={field.value}, name={field.name}, onCheckedChange and checked. The rest is on the Checkbox page.

Input

Sets field, placeholder="Acme Inc", placeholder="https://example.com" and type="url". The rest is on the Input page.

Button

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

All 42 form examples