Skip to content

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

Free

URL Builder with Dropdown Input Group for Svelte

Two URL fields: an https or http menu before the domain name, and a .com menu after a subdomain.

UI library: Ark UI

Two ways to build a URL from a menu plus typed text. The first field starts with an https:// menu that also offers http://. The second ends with a .com menu that also offers .net, .org, and .io. The button labels stay https:// and .com.

Use it when part of the URL is a choice and part is typed. A fully free address is an Input. In Svelte, Ark UI does not swap the button label to the item someone picked.

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 Group anatomy: root, addon, input, text, button

Usage

<div class="flex w-full max-w-sm flex-col gap-4"><InputGroup class="bg-background"><InputGroupInput aria-label="Domain" placeholder="example.com" type="text" /><InputGroupAddon><DropdownMenu positioning={{ placement: "bottom-start" }}><DropdownMenuTrigger>{#snippet asChild(props)}<InputGroupButton {...props({ class: "text-xs" })} variant="ghost">https://<ChevronDownIcon aria-hidden="true" class="size-3" /></InputGroupButton>{/snippet}</DropdownMenuTrigger><DropdownMenuContent><DropdownMenuGroup><DropdownMenuItem value="https">https://</DropdownMenuItem><DropdownMenuItem value="http">http://</DropdownMenuItem></DropdownMenuGroup></DropdownMenuContent></DropdownMenu></InputGroupAddon></InputGroup><InputGroup class="bg-background"><InputGroupInput aria-label="Subdomain" placeholder="subdomain" type="text" /><InputGroupAddon align="inline-end"><DropdownMenu positioning={{ placement: "bottom-end" }}><DropdownMenuTrigger>{#snippet asChild(props)}<InputGroupButton {...props({ class: "text-xs" })} variant="ghost">.com<ChevronDownIcon aria-hidden="true" class="size-3" /></InputGroupButton>{/snippet}</DropdownMenuTrigger><DropdownMenuContent><DropdownMenuGroup><DropdownMenuItem value="com">.com</DropdownMenuItem><DropdownMenuItem value="net">.net</DropdownMenuItem><DropdownMenuItem value="org">.org</DropdownMenuItem><DropdownMenuItem value="io">.io</DropdownMenuItem></DropdownMenuGroup></DropdownMenuContent></DropdownMenu></InputGroupAddon></InputGroup></div>

FAQ

How does the protocol menu sit before the input?

Its InputGroupAddon keeps the default align, inline-start, which places it before the input. In the code it still comes after the input, as every addon does.

How does the domain menu sit after the input?

Its addon has align="inline-end".

How are the menu buttons built?

Each trigger is a ghost InputGroupButton with text-xs, the current value and a small chevron. DropdownMenuTrigger takes an asChild snippet that renders the InputGroupButton.

Where do the menus open?

Each opens under its button, aligned to the edge it sits on: start for the protocol, end for the domain.

Do the buttons show the chosen value?

Not here: they always read https:// and .com. Keep each choice in state, render it in its trigger and combine the parts into the URL.

How are the inputs labeled?

aria-label="Domain" and aria-label="Subdomain", since neither has a visible label.

API Reference

Input Group

Sets aria-label="Domain", placeholder="example.com", type="text", props, text-xs and variant="ghost". The rest is on the Input Group page.

Dropdown Menu

Sets positioning, placement, bottom-start, value="https", value="http" and bottom-end. The rest is on the Dropdown Menu page.

All 39 input group examples