Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · Text

URL Builder Input Group for React

A domain input between a fixed https:// prefix and a .com suffix.

Framework
UI library

A URL with fixed ends: https:// before the field and .com after it, both InputGroupText, so people type only the name in the middle.

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

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.

All 39 input group examples