# Input Group Display additional information or actions to an input or textarea. ```svelte

12 results https:// {#snippet child({ props })} {/snippet} This is content in a tooltip. {#snippet child({ props })} Auto {/snippet} Auto Agent Manual 52% used

``` ## Installation ```bash pnpm dlx shadcn-svelte@latest add input-group ``` ```bash npx shadcn-svelte@latest add input-group ``` ```bash bun x shadcn-svelte@latest add input-group ``` ## Usage ```svelte Search ``` ## Examples ### Icon ```svelte

``` ### Text Display additional text information alongside inputs. ```svelte

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

``` ### Button Add buttons to perform actions within the input group. ```svelte

clipboard.copy("https://x.com/shadcn")} > {#if clipboard.copied} {:else} {/if} {#snippet child({ props })} {/snippet}

Your connection is not secure.

You should not enter any sensitive information on this site.

https:// (isFavorite = !isFavorite)} size="icon-xs" > Search

``` ### Tooltip Add tooltips to provide additional context or help. ```svelte

{#snippet child({ props })} {/snippet}

Password must be at least 8 characters

{#snippet child({ props })} {/snippet}

We'll use this to send you notifications

{#snippet child({ props })} {/snippet}

Click for help with API keys

``` ### Textarea Input groups also work with textarea components. Use `block-start` or `block-end` for alignment. ```svelte

script.js Line 1, Column 1 Run

``` ### Spinner Show loading indicators while processing input. ```svelte

Saving... Please wait...

``` ### Label Add labels within input groups to improve accessibility. ```svelte

@ Email {#snippet child({ props })} {/snippet}

We'll use this to send you notifications

``` ### Dropdown Pair input groups with dropdown menus for complex interactions. ```svelte

{#snippet child({ props })} {/snippet} Settings Copy path Open location {#snippet child({ props })} Search In... {/snippet} Documentation Blog Posts Changelog

``` ### Button Group Wrap input groups with button groups to create prefixes and suffixes. ```svelte

https:// .com

``` ### Custom Input Add the `data-slot="input-group-control"` attribute to your custom input for automatic behavior and focus state handling. No style is applied to the custom input. Apply your own styles using the `class` prop. ```svelte

Submit

```