Skip to content

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

Free

Form with Select for Ark UI

A required country select with a short description, which shows an error until a country is picked.

Country starts on Select a country, with the note Select your country of residence. Continue shows Please select a country until one of the six countries is picked.

Use it for a short closed list in a form. If people know the name and the list is long, a Combobox is faster. In React, Ark UI does not require a selection.

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="country"
      render={({ field, fieldState }) => (
        <Field invalid={fieldState.invalid}>
          <FieldLabel>Country</FieldLabel>
          <Select
            collection={countries}
            name={field.name}
            onValueChange={({ value }) => field.onChange(value[0] ?? "")}
            value={field.value ? [field.value] : []}
          >
            <SelectTrigger className="w-full">
              <SelectValue placeholder="Select a country" />
            </SelectTrigger>
            <SelectContent>
              {countries.items.map((item) => (
                <SelectItem item={item} key={item.value}>
                  {item.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <FieldDescription>
            Select your country of residence.
          </FieldDescription>
          <FieldError>{fieldState.error?.message}</FieldError>
        </Field>
      )}
{/* The rest of the file is under Installation. */}

FAQ

How does the country select update the form?

A Controller named country renders the Select. The options are a createListCollection; value is [field.value] and onValueChange stores value[0].

What are the option values?

us, uk, ca, au, de and fr, labeled United States, United Kingdom, Canada, Australia, Germany and France. The form stores the value, not the label.

What appears if no country is chosen?

country starts as "" and must pass .min(1, "Please select a country."). Continue without a choice marks the Field invalid and shows that message in its FieldError.

What is the text under the trigger?

A FieldDescription: "Select your country of residence." Until a country is picked, the trigger shows the placeholder "Select a country".

How is the label tied to the select?

Field links its FieldLabel to the select, so there are no ids.

What does Continue log?

Continue is a type="submit" button. After a choice, form.handleSubmit(onSubmit) logs { country } with the option's value, such as "us".

API Reference

Field

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

Select

Sets collection={countries}, name={field.name}, onValueChange, value, placeholder="Select a country" and item={item}. The rest is on the Select page.

Button

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

All 42 form examples