Skip to content

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

Free

URL Input for React

A Website field with a link icon, the placeholder https://example.com, and a line under it to include https:// or http://.

A Website label, a link icon inside the field, and the placeholder https://example.com. Under it, a line says to include https:// or http://.

Use it for a full address you will open later. A fixed https:// prefix, so people type only the domain, is an Input Group. In React, Base UI does not add the protocol for you.

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

Anatomy

Input anatomy: input, placeholder, value, caret

Usage

<Field className="w-full max-w-sm">
  <FieldLabel htmlFor="url-website">Website</FieldLabel>
  <InputGroup className="bg-background">
    <InputGroupInput
      id="url-website"
      placeholder="https://example.com"
      type="url"
    />
    <InputGroupAddon>
      <LinkIcon aria-hidden="true" />
    </InputGroupAddon>
  </InputGroup>
  <FieldDescription>Include https:// or http://</FieldDescription>
</Field>

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.

API Reference

Field

Sets htmlFor="url-website". The rest is on the Field page.

Input Group

Sets id="url-website", placeholder="https://example.com" and type="url". The rest is on the Input Group page.

All 24 input examples