Input Group

Installation

Install from the Vuzeno registry:

      Copy
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/input-group.json
    

      Copy
      npx shadcn-vue@latest add https://vuzeno.com/r/input-group.json
    

      Copy
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/input-group.json
    

      Copy
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/input-group.json
    

Usage

      Copy
      <script setup lang="ts">
import { InputGroup } from "@/components/ui/input-group";
</script>

<template>
  <InputGroup.Root>
    <InputGroup.Input placeholder="Search..." />
    <InputGroup.Addon>
      <SearchIcon />
    </InputGroup.Addon>
  </InputGroup.Root>
</template>
    

Composition

      Copy
      InputGroup.Root
├── InputGroup.Input or InputGroup.Textarea
├── InputGroup.Addon
├── InputGroup.Button
└── InputGroup.Text
    

For proper focus management, InputGroupAddon should always be placed after InputGroupInput or InputGroupTextarea in the DOM. Use the align prop to visually position the addon.

Examples

Icon

Add icons inside InputGroupAddon to decorate the input.

Text

Use InputGroupText for inline prefixes, suffixes, and helper labels.

Button

Add action buttons with InputGroupButton inside an addon.

Tooltip

Wrap InputGroupButton with Tooltip.Trigger and as-child to add contextual help on hover.

Menu

Use Menu.Trigger with as-child on InputGroupButton to attach a dropdown menu to the input.

Align

Use the align prop on InputGroupAddon to position the addon relative to the input:

Works with both InputGroupInput and InputGroupTextarea.