Input Group for Vue

The text field shares its border with an icon, a prefix, or a button.

Use it when that extra piece belongs to the field, like a currency mark or a copy button. A row of buttons on their own is a Button Group. In Vue, Ark UI focuses the input when the addon is clicked, unless the click hits a button.

Installation

Anatomy

Usage

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

<template>
  <InputGroup class="max-w-xs">
    <InputGroupInput placeholder="Search..." />
    <InputGroupAddon>
      <SearchIcon aria-hidden="true" />
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
  </InputGroup>
</template>

Accessibility

Demos

Inline Start

align set to inline-start puts the addon on the leading side of the field, which is also what you get if you omit it. A search icon ahead of the placeholder is the usual reason to spell that out. The side is logical, so a right-to-left page places the icon on the right.

Inline End

align set to inline-end parks the addon after the text, on the trailing edge. A password field uses it for an eye icon, which should not sit in front of the characters being typed. The edge follows writing direction, so the icon stays at the end in Arabic as well as English.

Block Start

align set to block-start stacks the addon above the control, as a header rather than a side chip. One field puts a Full Name caption over a single line, and another puts a filename plus a copy button over a code textarea. Use the top edge when the addon names the whole control, not a piece of the value.

Block End

align set to block-end sits under the control, where a footer belongs. An amount field can show USD there, and a comment box can show a character count with a Post button at the end of the row. Use the bottom edge for a note about what was just typed, not for a prefix.

Icon

Icons in the addon say what the field wants before the placeholder does: search, mail, or a card number. Keep them aria-hidden when a label already names the field, and put a second icon on the trailing side for a status mark. If the glyph should act on click, make it a button instead of a bare icon.

Text

Text addons are characters that belong to the value but are not typed, such as a dollar sign with USD, a URL scheme with a domain, or a company email suffix. InputGroupText renders that string, including a remaining-character count under a textarea. Use text for a unit or a domain, and an icon when the addon is only a hint.

Button

InputGroupButton belongs in the addon when a click should do more than focus the field. A read-only URL gets a copy button that swaps to a check for two seconds, and a rounded field opens a popover from an info button while a star toggles favorite. A third field ends in a Search label. Use plain text when nothing in the addon is clickable.

Kbd

A shortcut hint sits on the trailing edge, next to the search icon, so the field shows both its job and its key. Kbd draws the command-K mark, and because that hint is not a button, a click still focuses the input. Skip it on a phone layout where the shortcut does not exist. The field label stays the accessible name.

Dropdown

A menu in the addon is a choice about the field, not the value itself. A filename ends in a more-actions button for settings, copy path, and open location, while a search ends in Search In and a short list of places. The trigger is an InputGroupButton, so the click opens the menu instead of only focusing the input.

Spinner

A spinner in the addon means the field is busy, and it should disappear when the request finishes. Searching and processing place Spinner at one end. Saving pairs it with a short status word, and refreshing uses a spinning loader plus a please-wait note on the other side. Keep the placeholder specific so the icon is not the only clue.

Textarea

A small code editor wants both block edges. The top row carries the filename with refresh and copy buttons, and the bottom row carries a cursor readout with Run. Borders on those addons separate the bars from the code. Use both edges for an editor, and only the footer for a comment box.

Custom

Bring your own element only when InputGroupInput and InputGroupTextarea cannot do the job. This textarea grows with its content and sets data-slot to input-group-control so the group focus ring still applies, with Submit at block-end. The built-in parts already carry that slot. Without it, the control never picks up the group's focus styles.

Rtl

The search field, the busy states, and the comment box return with dir set to rtl and Arabic copy. Inline addons follow writing direction, so the icon leads from the right and the results note sits on the trailing edge. The comment footer uses a logical margin so Post stays at the end. Set dir on the surrounding form, or the label beside the group keeps going the other way.

FAQ

API Reference