Skip to content

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

Free

URL Builder Input Group for React

A domain field between a fixed https:// prefix and a .com suffix, so only the name is typed.

People type the name in the middle. https:// is fixed text before the field, and .com is fixed text after it. Neither piece is part of the input's value. The placeholder is example.

Use it when the protocol and the ending never change. If either one is a choice, use a menu instead of fixed text. A free-form address is an Input. In React, Base UI does not join the three parts into one URL.

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

<InputGroup className="w-full max-w-sm bg-background">
  <InputGroupInput
    aria-label="Domain name"
    placeholder="example"
    type="text"
  />
  <InputGroupAddon>
    <InputGroupText>https://</InputGroupText>
  </InputGroupAddon>
  <InputGroupAddon align="inline-end">
    <InputGroupText>.com</InputGroupText>
  </InputGroupAddon>
</InputGroup>

FAQ

How do the prefix and suffix get their sides?

The prefix addon keeps the default inline-start and the suffix addon has align="inline-end". Both are written after the input.

Does the value include https:// and .com?

No. Build the URL from the parts when you use it.

How do I let people pick the protocol or the domain?

Put a menu in the addon, as in URL Builder with Dropdown.

How is the input labeled?

aria-label="Domain name".

What does a click on https:// do?

A click on the addon's empty space focuses the input, because the addon looks for the group's input. Clicks on a button inside the addon stay on that button.

What happens right to left?

The addons swap sides with the text direction. A URL reads left to right, so set dir="ltr" on the group if your page is right to left.

API Reference

Input Group

Sets aria-label="Domain name", placeholder="example", type="text" and align="inline-end". The rest is on the Input Group page.

All 39 input group examples