Input Group

Stable v1.0.2

Attaches text, icons, or buttons to the side of an input so they read as one connected field instead of separate pieces.

Interactive Playground

Experiment with size, disabled, and error states across a group wrapping an icon prepend, an input, and a button append.

Geometry

Size

Small (sm)

States

Error State

Disabled

Live Source Code

<InputGroup >
  <template #prepend>
    <Icon icon="lucide:at-sign" class="w-4 h-4" />
  </template>

  <InputText v-model="username" size="sm" placeholder="Choose a username" />

  <template #append>
    <Button label="Check" severity="primary" size="sm"  />
  </template>
</InputGroup>

Text & Icon Addons

Use the prepend slot for static visual context. Place your <InputText> in the default slot.

TEU

Template

<!-- Icon Prepend -->
<InputGroup>
  <template #prepend>
    <Icon icon="lucide:mail" class="w-4 h-4" />
  </template>
  <InputText v-model="email" type="email" placeholder="Email" />
</InputGroup>

<!-- Text Prepend -->
<InputGroup>
  <template #prepend>TEU</template>
  <InputText v-model="weight" type="number" />
</InputGroup>

Button Integration

Use the append slot to inject your custom Button. The wrapper automatically strips the button's border radius for a flush fit.

Template

<InputGroup>
  <template #prepend>
    <Icon icon="lucide:search" />
  </template>

  <InputText v-model="query" type="text" placeholder="Search..." />

  <template #append>
    <Button label="Search" severity="primary" />
  </template>
</InputGroup>

Sizes

Pass the size prop (xs, sm, md, lg) to both the InputGroup and the InputText to maintain perfect internal scaling.

https://

Template

<!-- Extra Small -->
<InputGroup size="xs">
  <template #prepend>https://</template>
  <InputText size="xs" />
</InputGroup>

<!-- Large -->
<InputGroup size="lg">
  <template #prepend>https://</template>
  <InputText size="lg" />
</InputGroup>

Validation & States

Synchronize the disabled and error props across both the wrapper and the input to trigger exact border-color and opacity changes.

Username contains invalid characters.

Template

<!-- Error State -->
<InputGroup error>
  <template #prepend>
    <Icon icon="lucide:alert-circle" class="text-danger" />
  </template>
  <InputText error v-model="val" />
</InputGroup>

<!-- Disabled State -->
<InputGroup disabled>
  <template #prepend>
    <Icon icon="lucide:lock" />
  </template>
  <InputText disabled v-model="val" />
</InputGroup>

API Reference

Props

Name	Type / Signature	Default	Description
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"sm"	Dimensional size applied to the group wrapper and its child input.
disabled	boolean	false	Disables interaction and dims the entire group.
error	boolean	false	Applies red error styling to the group border.

Slots

Slot Name	Exposed Bindings	Description
prepend	-	Content (text, icon, button) rendered before the input.
default	-	The input element being wrapped (e.g. InputText).
append	-	Content (text, icon, button) rendered after the input.