New

Input Group

PreviousNext

Add addons, buttons, and helper content to inputs.

Input Group — All Variants × States (Sm)

Default

Default
Filled
Disabled
Error
Loading

E-Mail

Default
Filled
Disabled
Error
Loading

Password

Default
Filled
Disabled
Error
Loading

Search

Default
1
Filled
1
Disabled
1
Error
1
Loading
1

Phone Number

Default
+49
Filled
+49
Disabled
+49
Error
+49
Loading
+49

Website

Default
https://
Filled
https://
Disabled
https://
Error
https://
Loading
https://

Amount

Default
$
Filled
$
Disabled
$
Error
$
Loading
$

Date

Default
Filled
Disabled
Error
Loading

Card Number

Default
Filled
Disabled
Error
Loading

Domain

Default
Filled
Disabled
Error
Loading

Permission

Default
Filled
Disabled
Error
Loading

Input Group — All Variants (XS Size)

Defaultxs
E-Mailxs
Passwordxs
Searchxs
1
Phone Numberxs
+49
Websitexs
https://
Amountxs
$
Datexs
Card Numberxs
Domainxs
Permissionxs

Input Group — All Variants (SM Size)

Defaultsm
E-Mailsm
Passwordsm
Searchsm
1
Phone Numbersm
+49
Websitesm
https://
Amountsm
$
Datesm
Card Numbersm
Domainsm
Permissionsm

Input Group — All Variants (MD Size)

Defaultmd
E-Mailmd
Passwordmd
Searchmd
1
Phone Numbermd
+49
Websitemd
https://
Amountmd
$
Datemd
Card Numbermd
Domainmd
Permissionmd

Password Strength Component

Your password must include:

Use at least 8 characters.

Mix letters, numbers, and symbols.

Avoid common words or patterns.

Password StrengthToo Weak

Your password must include:

Use at least 8 characters.

Mix letters, numbers, and symbols.

Avoid common words or patterns.

Password StrengthFair

Your password must include:

Use at least 8 characters.

Mix letters, numbers, and symbols.

Avoid common words or patterns.

Password StrengthVery Strong

Composition — Provider + Shell

Provider only — custom outer chrome (Stepper-like)sm
Provider + Shell — explicit compositionsm
K
"use client"

import * as React from "react"

Installation

pnpm dlx createui@latest add input-group

Usage

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupTextarea,
} from "@/components/ui/input-group"
<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

Align

Position the addon relative to the input.

inline-start

Position the addon at the start of the input. This is the default.

Component input-group-inline-start not found in registry.

inline-end

Position the addon at the end of the input.

Component input-group-inline-end not found in registry.

block-start

Position the addon above the input.

Component input-group-block-start not found in registry.

block-end

Position the addon below the input.

Component input-group-block-end not found in registry.

Examples

Icon

Component input-group-icon not found in registry.

Text

Component input-group-text not found in registry.

Button

Component input-group-button not found in registry.

Kbd

Component input-group-kbd not found in registry.

Dropdown

Component input-group-dropdown not found in registry.

Spinner

Component input-group-spinner not found in registry.

Textarea

Component input-group-textarea not found in registry.

Custom Input

Add the data-slot="input-group-control" attribute to your custom input for automatic focus state handling.

Here's an example of a custom resizable textarea from a third-party library.

Component input-group-custom not found in registry.

API Reference

InputGroup

The main component that wraps inputs and addons.

PropTypeDefault
classNamestring
<InputGroup>
  <InputGroupInput />
  <InputGroupAddon />
</InputGroup>

InputGroupAddon

Displays icons, text, buttons, or other content alongside inputs.

PropTypeDefault
classNamestring
<InputGroupAddon>
  <SearchIcon />
</InputGroupAddon>

The InputGroupAddon component can have multiple InputGroupButton components and icons.

<InputGroupAddon>
  <InputGroupButton>Button</InputGroupButton>
  <InputGroupButton>Button</InputGroupButton>
</InputGroupAddon>

InputGroupButton

Displays buttons within input groups.

PropTypeDefault
size"xs" | "icon-xs" | "sm" | "icon-sm""xs"
variant"default" | "destructive" | "outline" | "secondary" | "ghost" | "link""ghost"
classNamestring
<InputGroupButton>Button</InputGroupButton>
<InputGroupButton size="icon-xs" aria-label="Copy">
  <CopyIcon />
</InputGroupButton>

InputGroupInput

Replacement for <Input /> when building input groups. This component has the input group styles pre-applied and uses the unified data-slot="input-group-control" for focus state handling.

PropTypeDefault
classNamestring

All other props are passed through to the underlying <Input /> component.

<InputGroup>
  <InputGroupInput placeholder="Enter text..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

InputGroupTextarea

Replacement for <Textarea /> when building input groups. This component has the textarea group styles pre-applied and uses the unified data-slot="input-group-control" for focus state handling.

PropTypeDefault
classNamestring

All other props are passed through to the underlying <Textarea /> component.

<InputGroup>
  <InputGroupTextarea placeholder="Enter message..." />
  <InputGroupAddon>
    <InputGroupButton>Send</InputGroupButton>
  </InputGroupAddon>
</InputGroup>