12 results

https://

52% used

Installation

pnpm dlx shadcn-vue@latest add input-group

Usage

<script setup lang="ts">
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from '@/components/ui/input-group'
</script>

<template>
  <InputGroup>
    <InputGroupInput placeholder="Search..." />
    <InputGroupAddon>
      <SearchIcon />
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <InputGroupButton>Search</InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
</template>

Examples

Icon

Text

Display additional text information alongside inputs.

$

USD

https://

.com

@company.com

120 characters left

Button

Add buttons to perform actions within the input group.

https://

Tooltip

Add tooltips to provide additional context or help.

Textarea

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

Line 1, Column 1

script.js

Spinner

Show loading indicators while processing input.

Saving...

Please wait...

Label

Add labels within input groups to improve accessibility.

@

Email

Dropdown

Pair input groups with dropdown menus for complex interactions.

Button Group

Wrap input groups with button groups to create prefixes and suffixes.

https://

.com

Custom Input

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

<script lang='ts' setup>
import { InputGroup, InputGroupAddon, InputGroupButton } from '@/registry/default/ui/input-group'
</script>

<template>
  <div class="grid w-full max-w-sm gap-6">
    <InputGroup>
      <textarea
        data-slot="input-group-control"
        class="flex field-sizing-content min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2.5 text-base transition-[color,box-shadow] outline-none md:text-sm"
        placeholder="Autoresize textarea..."
      />
      <InputGroupAddon align="block-end">
        <InputGroupButton class="ml-auto" size="sm" variant="default">
          Submit
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  </div>
</template>

API Reference

InputGroup

The main component that wraps inputs and addons.

Prop	Type	Default
class	string

<template>
  <InputGroup>
    <InputGroupInput />
    <InputGroupAddon />
  </InputGroup>
</template>

InputGroupAddon

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

::info For proper focus navigation, the InputGroupAddon component should be placed after the input. Set the align prop to position the addon. ::

Prop	Type	Default
align	"inline-start" | "inline-end" | "block-start" | "block-end"	'inline-start'
class	string

<InputGroupAddon align="inline-end">
  <SearchIcon />
</InputGroupAddon>

For <InputGroupInput />, use the inline-start or inline-end alignment. For <InputGroupTextarea />, use the block-start or block-end alignment.

The InputGroupAddon component can have multiple InputGroupButton components and icons.

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

InputGroupButton

Displays buttons within input groups.

Prop	Type	Default
size	"xs" | "icon-xs" | "sm" | "icon-sm"	"xs"
variant	"default" | "destructive" | "outline" | "secondary" | "ghost" | "link"	"ghost"
class	string

<template>
  <InputGroupButton>Button</InputGroupButton>
  <InputGroupButton size="icon-xs" aria-label="Copy">
    <CopyIcon />
  </InputGroupButton>
</template>

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.

Prop	Type	Default
class	string

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

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

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.

Prop	Type	Default
class	string

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

<template>
  <InputGroup>
    <InputGroupTextarea placeholder="Enter message..." />
    <InputGroupAddon align="block-end">
      <InputGroupButton>Send</InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
</template>