Skip to content

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

Free

URL Builder Input Group for Solid

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

UI library: Ark UI

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 Solid, Ark UI does not join the three parts into one URL.

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

<InputGroup class="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