║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Input Group description: Display additional information or actions to an input or textarea. links: docs: https://ui.shadcn.com/docs/components/input-group

<ComponentPreview name="input-group-demo" />

Installation

<CodeBlockCommand component="input-group" />

Examples

Icon

<ComponentPreview name="input-group-icon" />

Text

<ComponentPreview name="input-group-text" />

Button

<ComponentPreview name="input-group-button" />

Tooltip

<ComponentPreview name="input-group-tooltip" />

Textarea

<ComponentPreview name="input-group-textarea" />

Spinner

<ComponentPreview name="input-group-spinner" />

Label

<ComponentPreview name="input-group-label" />

Dropdown

<ComponentPreview name="input-group-dropdown" />

Button Group

<ComponentPreview name="input-group-button-group" />

Custom Input

<ComponentPreview name="input-group-custom-input" />

Migrating from Radix UI

<Steps> <Step> <include>migration-steps/common.mdx</include> </Step> </Steps>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║