StorybookGitHub

Input Group

Groups an input with addons, icons, and inline actions.

https://

Installation

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/input-group.json

Usage

A small supporting primitive used by command's search input — not part of the original 15-component batch, added because both source and shadcn-vue's own command component depend on it.

<script setup lang="ts">
import { InputGroup, InputGroupAddon } from "@/components/ui/input-group";
import { SearchIcon } from "@lucide/vue";
</script>

<template>
  <InputGroup>
    <input class="w-full text-sm outline-none" placeholder="Search..." />
    <InputGroupAddon>
      <SearchIcon class="size-4 opacity-50" />
    </InputGroupAddon>
  </InputGroup>
</template>