Input Group

InputGroup visually joins an addon (plain text or a Button) to an Input, so the addon and the control share one border, radius, and focus ring. Use InputGroupText for plain text addons like $ or .com.

ExamplesCodeUsageChangelog

Basic usage — prefix

$

Tailwind v4

<InputGroup>
  <template #prepend><InputGroupText>$</InputGroupText></template>
  <Input v-model="amount" placeholder="0.00" />
</InputGroup>

Suffix addon

.com

Tailwind v4

<InputGroup>
  <Input v-model="domain" placeholder="yoursite" />
  <template #append><InputGroupText>.com</InputGroupText></template>
</InputGroup>

Button addon

Drop a Button in append for a search-with-button pattern. Its border and radius are flattened automatically to stay flush with the group.

Tailwind v4

<InputGroup>
  <Input v-model="query" placeholder="Search…" />
  <template #append><Button variant="secondary">Search</Button></template>
</InputGroup>

Sizes

size controls the addon proportions and the group's minimum height — pass the same value you'd use on other sized controls like Button.

$

$

$

Tailwind v4

<InputGroup size="sm">
  <template #prepend><InputGroupText>$</InputGroupText></template>
  <Input placeholder="Small" />
</InputGroup>

Props

Prop	Type	Default	Description
size	'sm' | 'md' | 'lg'	'md'	Sizes the addon segments and the group's minimum height

Slots

Slot	Description
prepend	Addon(s) rendered before the control (e.g. InputGroupText, an icon)
default	The form control, typically an Input
append	Addon(s) rendered after the control (e.g. InputGroupText, a Button)