Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form examples · Basic Forms

URL Input Form for React

A form with one website input that only saves a valid URL.

Framework
UI library

People type URLs without a scheme or with typos. This form checks the website with Zod's z.url(), so example.com without https:// fails with "Please enter a valid URL." A Controller connects the Input to React Hook Form inside a Field, with a FieldDescription and a FieldError, and type="url" brings up a keyboard with / and .com on phones. Use it for profile settings, portfolio links or social links.

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

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.

All 42 form examples