Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input examples · Types

URL Input for React

A website field with a link icon and a hint to include the protocol.

Framework
UI library

URLs fail validation most often for a missing protocol. This example uses an input with type url, a LinkIcon in an InputGroupAddon, and a description under the field that says to include https:// or http://. Use it for website, portfolio and social profile fields.

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 type url give this field?

The browser checks that the value is an absolute URL, with its protocol, when the form is submitted, and mobile keyboards show keys like / and .com.

How is the icon placed inside the field?

The field is an InputGroup: InputGroupInput is the input and InputGroupAddon holds LinkIcon. The addon comes after the input in the markup and sits at the inline start, so it is on the left in left-to-right text and on the right in right-to-left text. Clicking it focuses the input.

Is the icon read by screen readers?

No. LinkIcon has aria-hidden, because the Website label already names the field. The icon is a visual hint only.

How is Website tied to the field?

Clicking the label focuses the field, and screen readers announce it with the field. FieldLabel sets htmlFor to url-website, the input's id.

Why the hint about https://?

Because example.com alone fails the browser's check. The description says so before people submit; you can also add the protocol for them when the value has none.

Can https:// be shown as a fixed prefix?

Yes. Put it in the addon as InputGroupText, and add it back to the value when you submit, so people type only the domain.

All 24 input examples