Skip to content

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

Free

URL Input for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not add the protocol for you.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Input anatomy: input, placeholder, value, caret

Usage

<Field class="w-full max-w-sm">
  <FieldLabel>Website</FieldLabel>
  <InputGroup class="bg-background">
    <InputGroupInput 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. Field links FieldLabel to the input inside it, so there is no id to match.

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

No extra props in this demo. The rest is on the Field page.

Input Group

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

All 24 input examples