InputGroup

Use InputGroup to attach text, icons, or interactive elements like buttons to an input field, providing a consistent and accessible design.

Props

Prop	Type	Default	Description
addon	String	''	Text or value displayed before or after the input.
icon	String	'primary'	Icon name or class to show inside the group
size	String	md	Size of the input group. Options: sm, md,
disabled	Boolean	false	Disables the input group and all interactive elements inside.
variant	String	default	Style variant of the group. Common options: default,

Example component with all props

<InputGroup state="default" size="sm" destructive="true">
  <InputGroupAddon> <i class="pi pi-envelope"></i> </InputGroupAddon>
  <InputText v-model="email" placeholder="Enter your email" />
    <InputGroupAddon> <i class="pi pi-question-circle"></i> </InputGroupAddon>
</InputGroup>

Basic

Create a group by wrapping an input with the InputGroup component. Add-ons are placed inside the InputGroupAddon component.

Email*

This is a hint text to help user.

<div class="p-inputgroup">
  <label>Email<span>*</span></label>
  <InputGroup state="default" size="sm">
    <InputGroupAddon>
      <i class="pi pi-envelope"></i> 
    </InputGroupAddon>
    <InputText v-model="email" placeholder="joe@privacybee.com" />
    <InputGroupAddon v-tooltip.top="{ value: 'Hint text to help user', class: topTooltip }">
      <i class="pi pi-question-circle"></i> 
    </InputGroupAddon>
  </InputGroup>
  <span class="hint-text">This is a hint text to help user. </span>
</div>

Disabled

Use the disabled property to make a component non-interactive. Disabled components cannot be focused, clicked, or typed into, and are styled to reflect their inactive state.

Email*

This is a hint text to help user.

<div class="p-inputgroup">
  <label>Email<span>*</span></label>
  <InputGroup state="default" size="sm" disabled="true">
    <InputGroupAddon>
      <i class="pi pi-envelope"></i> 
    </InputGroupAddon>
    <InputText v-model="email1" placeholder="joe@privacybee.com" disabled />
		<InputGroupAddon v-tooltip.top="{ value: 'Hint text to help user', class: topTooltip }">
      <i class="pi pi-question-circle"></i> 
    </InputGroupAddon>
  </InputGroup>
  <span class="hint-text">This is a hint text to help user. </span>
</div>

Input Variants

Phone Number with Country Code

An input field paired with a country code dropdown for entering international phone numbers easily.

Phone Number*

US

+1

This is a hint text to help user.

<div class="p-inputgroup">
  <label>Phone Number<span>*</span></label>
  <InputGroup state="default" size="sm">
    <!-- Country Dropdown -->
    <InputGroupAddon class="country-dropdown">
      <Dropdown
        v-model="selectedCountry"
        :options="countries"
        optionLabel="name"
        panelClass="country-dropdown-panel"
        class="country-select"
      >
        <template #item="slotProps">
          <div>
            (( slotProps.option.code )) (( slotProps.option.dial ))
          </div>
        </template>
        <template #value="slotProps">
          <div>
            (( slotProps.value.code ))
          </div>
        </template>
      </Dropdown>
    </InputGroupAddon>
    <!-- Country Code Prefix (Fixed) -->
    <InputGroupAddon>
      <span>(( selectedCountry.dial ))</span>
    </InputGroupAddon>
    <!-- Phone Number Input -->
    <InputText
      v-model="phoneNumber"
      placeholder="(555) 000-0000"
    />
    <InputGroupAddon v-tooltip.top="{ value: 'select country & Enter phone number', class: topTooltip }">
      <i class="pi pi-question-circle"></i> 
    </InputGroupAddon>
  </InputGroup>
  <span class="hint-text">This is a hint text to help user. </span>
</div>

Amount With Currency Dropdown

Enter an amount and choose a currency using a single, unified input group.

Amount*

$

USD

Select a currency and enter the amount.

<div class="p-inputgroup">
  <label>Amount<span>*</span></label>
  <InputGroup state="default" size="sm">
    <InputGroupAddon class="currency-symbol">
      (( selectedCurrency.symbol ))
    </InputGroupAddon>
    <InputText v-model="amount" placeholder="1,000.00" />
    <InputGroupAddon v-tooltip.top="{ value: 'Enter the amount in selected currency', class: topTooltip }">
      <i class="pi pi-question-circle"></i> 
    </InputGroupAddon>
    <InputGroupAddon class="currency-dropdown">
      <Dropdown
        v-model="selectedCurrency"
        :options="currencies"
        optionLabel="name"
        panelClass="currency-dropdown-panel"
        class="currency-select"
        :showClear="false"
      >
        <template #value="slotProps">
          <div class="currency-value">
            <span>(( slotProps.value?.name ))</span>
          </div>
        </template>
      </Dropdown>
    </InputGroupAddon>
  </InputGroup>
  <span class="hint-text">Select a currency and enter the amount.</span>
</div>

Website Input with HTTPS Label

An input field prefixed with https:// to standardize website URL entry.

Website*

http://

Example: www.privacybee.com

<div class="p-inputgroup">
  <label>Website<span>*</span></label>
  <InputGroup state="default" size="sm">
    <!-- Left static prefix -->
    <InputGroupAddon class="protocol-addon">
      http://
    </InputGroupAddon>
    <!-- Input Field -->
    <InputText v-model="website" placeholder="www.privacybee.com" />
    <!-- Hint Icon -->
    <InputGroupAddon v-tooltip.top="{ value: 'Enter a valid website URL' , class: topTooltip}">
      <i class="pi pi-question-circle"></i>
    </InputGroupAddon>
  </InputGroup>
  <span class="hint-text">Example: www.privacybee.com</span>
</div>

Card Number

A visually guided input field where the card logo (such as Visa, Mastercard, or Amex) appears next to the card number input.

Card number*

We accept Visa, MasterCard, and RuPay cards.

<div class="p-inputgroup">
  <label>Card number<span>*</span></label>
  <InputGroup state="default" size="sm">
    <!-- Left Card Logo -->
    <InputGroupAddon class="card-addon">
      <img src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Mastercard-logo.svg" alt="MasterCard" class="card-logo" />
    </InputGroupAddon>
    <!-- Card Number Input -->
    <InputText 
      v-model="cardNumber" 
      placeholder="5555-5555-5555-5555"
      maxlength="19"
    />
    <!-- Tooltip Icon -->
    <InputGroupAddon class="hint-icon" 
      v-tooltip.top="{ value: 'Enter a valid credit card number', class: topTooltip }">
      <i class="pi pi-question-circle"></i>
    </InputGroupAddon>
  </InputGroup>
  <span class="hint-text">We accept Visa, MasterCard, and RuPay cards.</span>
</div>

User Multi-Selection Input

Select multiple users or items, with each selection displayed as a removable tag for clarity and easy management.

Users*

Joe

John

Start typing to add more members.

<div class="p-inputgroup">
  <label>Users<span>*</span></label>
  <InputGroup state="default" size="sm" class="!items-start">
    <div class="profile-selector">
      <div class="profile-chip-container">
        <div v-for="user in selectedUsers" :key="user.id" class="profile-chip">
          <img :src="user.img" :alt="user.name" class="profile-avatar" />
          <span class="profile-name">(( user.name ))</span>
          <i class="pi pi-times profile-remove" @click="removeUser(user.id)"></i>
        </div>
        <!-- Search Input -->
        <InputText
          v-model="inputText"
          placeholder="Add user..."
          class="profile-input"
          @focus="showSuggestions = true"
          @blur="setTimeout(() => (showSuggestions = false), 150)"
        />
      </div>
      <!-- Suggestions Dropdown -->
      <ul v-if="showSuggestions && filteredUsers.length" class="suggestion-list">
        <li
          v-for="user in filteredUsers"
          :key="user.id"
          @click="addUser(user)"
          class="suggestion-item"
        >
          <img :src="user.img" :alt="user.name" class="suggestion-avatar" />
          <span>(( user.name ))</span>
        </li>
      </ul>
    </div>
    <!-- Tooltip Icon -->
    <InputGroupAddon class="hint-icon" 
      v-tooltip.top="{ value: 'Enter a valid credit card number', class: topTooltip }">
      <i class="pi pi-question-circle"></i>
    </InputGroupAddon>
  </InputGroup>
  <span class="hint-text">Start typing to add more members.</span>
</div>

Input Field with Copy-to-Clipboard Button

An input field paired with a copy button allows users to quickly copy its content to the clipboard.

Website*

Copy

Click the copy icon to copy this URL.

<div class="p-inputgroup">
  <label>Website<span>*</span></label>
  <InputGroup state="default" size="sm">
    <!-- Static Text Input -->
    <InputText 
      v-model="website" 
      readonly
      class="readonly-input"
      placeholder="www.privacybee.com"
    />
    <!-- Tooltip Icon -->
    <InputGroupAddon v-tooltip.top="{ value: 'Click the copy icon to copy this URL', class: topTooltip }">
      <i class="pi pi-question-circle"></i>
    </InputGroupAddon>
    <!-- Copy Button -->
    <InputGroupAddon class="copy-addon" @click="copyToClipboard">
      <i class="pi pi-copy"></i>
      <span class="copy-text">Copy</span>
    </InputGroupAddon>
  </InputGroup>
  <span class="hint-text">Click the copy icon to copy this URL.</span>  
</div>

Size

sm

Smaller font with reduced padding for compact layouts. like py-2 px-3

Email*

This is a hint text to help user.

<div class="p-inputgroup">
  <label>Email<span>*</span></label>
  <InputGroup state="default" size="sm">
    <InputGroupAddon>
      <i class="pi pi-envelope"></i> 
    </InputGroupAddon>
    <InputText v-model="email" placeholder="joe@privacybee.com" />
    <InputGroupAddon v-tooltip.top="{ value: 'Hint text to help user', class: topTooltip }">
      <i class="pi pi-question-circle"></i> 
    </InputGroupAddon>
  </InputGroup>
  <span class="hint-text">This is a hint text to help user. </span>
</div>

md

Default size with standard font and padding for most forms. like py-2.5 px-3

Email*

This is a hint text to help user.

<div class="p-inputgroup">
  <label>Email<span>*</span></label>
  <InputGroup state="default" size="md">
    <InputGroupAddon>
      <i class="pi pi-envelope"></i> 
    </InputGroupAddon>
    <InputText v-model="email" placeholder="joe@privacybee.com" />
    <InputGroupAddon v-tooltip.top="{ value: 'Hint text to help user', class: topTooltip }">
      <i class="pi pi-question-circle"></i> 
    </InputGroupAddon>
  </InputGroup>
  <span class="hint-text">This is a hint text to help user. </span>
</div>

Invalid Input

Invalid Input with Error Message

Input marked as invalid with an error message to indicate required corrections

Email*

This is an error message.

<div class="p-inputgroup">
  <label>Email<span>*</span></label>
  <InputGroup state="default" size="sm" invalid="true">
    <InputGroupAddon>
      <i class="pi pi-envelope"></i> 
    </InputGroupAddon>
    <InputText v-model="email" placeholder="joe@privacybee.com" />
    <InputGroupAddon v-tooltip.top="{ value: 'Enter your email id', class: topTooltip }">
      <i class="pi pi-info-circle"></i> 
    </InputGroupAddon>
  </InputGroup>
  <span class="error-message">This is an error message.</span>
</div>