Skip to content

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

Free

URL Input Form for React

A website field that only saves a valid URL, so a bare domain without a scheme does not pass the check.

Website starts empty, with a note about a portfolio URL. example.com without a scheme fails with Please enter a valid URL. Save submits only a URL that passes.

Use it for a profile or social link. A name for the site belongs in a second Input. In React, Base UI does not check the URL.

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="website"
      render={({ field, fieldState }) => (
        <Field invalid={fieldState.invalid}>
          <FieldLabel htmlFor="url-input-form-website">Website</FieldLabel>
          <Input
            {...field}
            id="url-input-form-website"
            placeholder="https://example.com"
            type="url"
          />
          <FieldDescription>
            Enter your website or portfolio URL.
          </FieldDescription>
          <FieldError>{fieldState.error?.message}</FieldError>
        </Field>
      )}
    />
    <Field orientation="horizontal">
      <Button type="submit">Save</Button>
    </Field>
  </FieldGroup>
</form>

FAQ

What does the URL check require?

website is z.url("Please enter a valid URL."). https://example.com passes. example.com, with no scheme, fails. To allow only https, pass protocol: /^https$/ in the options.

What is type url doing on the input?

type="url" changes the mobile keyboard, and the browser also checks the format on submit: a value without a scheme gets the browser's own hint before Zod runs. Add noValidate to the form to leave the check to Zod.

Where do the hint and the error live?

FieldDescription says "Enter your website or portfolio URL." FieldError shows "Please enter a valid URL." The placeholder is https://example.com.

How is the website field registered?

The Controller has name="website" and control={form.control}, and spreads field onto the Input. defaultValues sets website to "", which fails z.url() on submit. FieldLabel htmlFor matches the input's id, url-input-form-website.

What does Save submit?

Save is a type="submit" button. form.handleSubmit(onSubmit) passes the parsed { website } to onSubmit, which logs it.

Does the URL error appear as I type?

Not before the first submit: useForm doesn't set mode. After a failed submit, the check runs on each change and the error clears once the URL is valid.

API Reference

Field

Sets invalid={fieldState.invalid}, htmlFor="url-input-form-website" and orientation="horizontal". The rest is on the Field page.

Input

Sets field, id="url-input-form-website", 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