Input Group

Default

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

Usage

Import the parts you need from the component's folder.

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group";

Inline start

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

Inline end

Addon positioned at the end of the input.

Block start

Addon stacked above the control, typically with a textarea.

Block end

Addon stacked below the control, typically with a textarea.

Icon

Leading or trailing icon addons for context.

Text

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

Button

Inline buttons for copy, favorite, or submit actions.

Kbd

Keyboard shortcut hints rendered inside an addon.

Dropdown

A dropdown menu triggered from an inline button.

Spinner

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

Textarea

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

Custom input

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

API Reference