Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Multiple Action Buttons Input Group for Vue

A read-only repository link with an info button and a favorite button that fills its heart.

UI library: Ark UI

A read-only repository link, with two buttons at the end. One is info. The other is favorite: its heart fills when it is on, and the button is marked pressed. Pressing it only toggles that heart.

Use it when a locked value still has a couple of actions. If favorite is the whole control, a Toggle is the simpler button. In Vue, Ark UI does not save the favorite.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Input Group anatomy: root, addon, input, text, button

Usage

<InputGroup class="w-full max-w-sm bg-background">
  <InputGroupInput
    aria-label="Repository"
    placeholder="https://github.com/shadcn"
    :readOnly="true"
    type="url"
  />
  <InputGroupAddon align="inline-end">
    <InputGroupButton aria-label="Info" size="icon-xs" variant="ghost">
      <InfoIcon aria-hidden="true" />
    </InputGroupButton>
  </InputGroupAddon>
  <InputGroupAddon align="inline-end">
    <InputGroupButton
      aria-label="Favorite"
      :aria-pressed="favorited"
      @click="handleFavoriteToggle"
      size="icon-xs"
      variant="ghost"
    >
      <HeartIcon aria-hidden="true" :class='favorited ? "fill-current" : undefined' />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

FAQ

Why are the two buttons in separate addons?

Each InputGroupAddon with align="inline-end" is placed after the input, in source order, so two addons line up at the end. One addon holding both buttons works too.

How does the heart fill?

A favorited flag toggles on each press, and the icon gets fill-current while it's on, so the heart fills with the text color.

How do screen readers know the favorite is on?

The button sets aria-pressed from the same flag, so it's announced as a toggle button, pressed or not pressed. Its name stays Favorite.

What does the info button do?

Nothing in the demo. Open a Tooltip or a Popover from it, as in API Key Info.

Why is the input read-only?

It shows a link to act on, not to edit. readOnly keeps it focusable and selectable.

How are the icon buttons named?

Each InputGroupButton has an aria-label, Info and Favorite, and the icons are aria-hidden.

API Reference

Input Group

Sets aria-label="Repository", placeholder="https://github.com/shadcn", readOnly, type="url", align="inline-end" and aria-label="Info". The rest is on the Input Group page.

All 39 input group examples