Skip to content

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

Free

URL Builder with Dropdown Input Group for React

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

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 React, Base UI does not swap the button label to the item someone picked.

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

Usage

<div className="flex w-full max-w-sm flex-col gap-4">
  <InputGroup className="bg-background">
    <InputGroupInput
      aria-label="Domain"
      placeholder="example.com"
      type="text"
    />
    <InputGroupAddon>
      <DropdownMenu>
        <DropdownMenuTrigger
          render={<InputGroupButton className="text-xs" variant="ghost" />}
        >
          https://
          <ChevronDownIcon aria-hidden="true" className="size-3" />
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start">
          <DropdownMenuGroup>
            <DropdownMenuItem>https://</DropdownMenuItem>
            <DropdownMenuItem>http://</DropdownMenuItem>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </InputGroupAddon>
  </InputGroup>
  <InputGroup className="bg-background">
    <InputGroupInput
      aria-label="Subdomain"
      placeholder="subdomain"
      type="text"
    />
    <InputGroupAddon align="inline-end">
{/* The rest of the file is under Installation. */}

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 renders the InputGroupButton through render.

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", variant="ghost", aria-label="Subdomain" and placeholder="subdomain". The rest is on the Input Group page.

Dropdown Menu

Sets align="start" and align="end". The rest is on the Dropdown Menu page.

All 39 input group examples