Toggle Sidebar B
AppearanceLight & dark mode D

Input Group

Wraps an input with addons (prefix/suffix icons, text labels, or buttons) into a single composite control. The seams between the parts are flattened so it looks like one element.

Default

Composed input groups with icons, text, buttons, tooltips, and menus.

Replay preview
12 results
https://
52% used

Inline start

Addon positioned at the start of the input. This is the default.

Replay preview
$

Inline end

Addon positioned at the end of the input.

Replay preview
USD

Block start

Addon stacked above the control, typically with a textarea.

Replay preview
New message

Block end

Addon stacked below the control, typically with a textarea.

Replay preview
120 characters left

Icon

Leading or trailing icon addons for context.

Replay preview

Text

Static text addons for currency symbols, units, or prefixes.

Replay preview
$
USD
https://
.com
@company.com
120 characters left

Button

Inline buttons for copy, favorite, or submit actions.

Replay preview
https://

Kbd

Keyboard shortcut hints rendered inside an addon.

Replay preview
⌘K
Press/

Spinner

Loading state with a spinner addon while the input is disabled.

Replay preview
Saving...

Textarea

A textarea with block-start and block-end toolbars.

Replay preview
script.js
Line 1, Column 1

Custom input

Any control with data-slot="input-group-control" gets focus handling.

Replay preview

API Reference

InputGroup

PropTypeDefaultDescription
classstring—Wrapper that flattens the seams between the control and its addons.

InputGroupAddon

PropTypeDefaultDescription
align"inline-start" | "inline-end" | "block-start" | "block-end""inline-start"Position of the addon relative to the control. Use inline-* with inputs and block-* with textareas.
classstring—Addon container that holds icons, text, or buttons.

InputGroupButton

PropTypeDefaultDescription
variantButtonVariants["variant"]"ghost"Same enum as Button (default, secondary, outline, ghost, link, destructive).
size"xs" | "sm" | "icon-xs" | "icon-sm""xs"Compact sizes tuned to sit inside the group.
type"button" | "submit" | "reset""button"Native button type.
classstring—Extra classes forwarded to the underlying Button.

InputGroupInput / InputGroupTextarea

PropTypeDefaultDescription
classstring—Borderless input/textarea variants that sit flush inside the group. Other props pass through to Input/Textarea.

InputGroupText

PropTypeDefaultDescription
classstring—Static text addon (currency symbol, unit, prefix label).
InputInput Link