Input Group

<pa-input-group> | PaInputGroup

An enhanced input component that extends the basic input with floating labels, prepend/append icons, prepend text, and built-in validation display. Supports both regular inputs and currency inputs with flexible styling options.

<pa-input-group v-model="value" label="Username" />

When to Use Input Group vs Regular Input

Use pa-input-group when you need:

• Floating labels: Animated labels that move based on focus and value state
• Icon integration: Prepend or append icons with click handlers
• Prepend text: Static text that appears when the field is focused
• Enhanced validation: Built-in validation message display
• Currency support: Automatic switching between pa-input and pa-currency-input based on type
• Advanced styling: More sophisticated visual states and transitions

Use regular pa-input when you need:

• Simple text input: Basic input without additional visual elements
• Minimal styling: Clean, straightforward input appearance
• Custom layouts: When you want to handle labels and icons separately
• Performance: Slightly lighter component for simple use cases

Examples

Basic Input Group with Label

Full Name

*

<template>
  <pa-input-group 
    v-model="fullName" 
    label="Full Name" 
    placeholder="Enter your full name" 
  />
</template>

<script setup>
import { ref } from 'vue'

const fullName = ref('')
</script>

Input Types

Different input types with floating labels. Note: For non-currency types, PaInputGroup uses PaInput which supports 'text' and 'number' types.

Text Input

*

Quantity

*

Price

*

<template>
  <div>
    <pa-input-group type="text" v-model="textValue" label="Text Input" placeholder="Enter text" />
    <pa-input-group type="number" v-model="numberValue" label="Quantity" placeholder="Enter number" />
    <pa-input-group type="currency" v-model="currencyValue" label="Price" placeholder="Enter amount" />
  </div>
</template>

Prepend Icons

Add icons to the left side of the input with optional click handlers.

Username

*

Email

*

Secure Code

*

<template>
  <div>
    <pa-input-group 
      v-model="username" 
      prepend-icon="user-solid" 
      label="Username" 
      placeholder="Enter username"
      @prepend-click="handleUserClick"
    />
    <pa-input-group 
      v-model="email" 
      prepend-icon="envelope-solid" 
      label="Email" 
      placeholder="Enter email"
    />
    <pa-input-group 
      v-model="secureCode" 
      prepend-icon="lock-alt-solid" 
      label="Secure Code" 
      type="text" 
      placeholder="Enter secure code"
    />
  </div>
</template>

Append Icons

Add icons to the right side of the input with click handlers.

Search

*

Hidden Text

*

Clearable Input

*

<template>
  <div>
    <pa-input-group 
      v-model="searchTerm" 
      append-icon="search-light" 
      label="Search" 
      placeholder="Search for..."
      @append-click="performSearch"
    />
    <pa-input-group 
      v-model="hiddenText" 
      append-icon="eye-light" 
      label="Hidden Text" 
      type="text" 
      placeholder="Enter hidden text"
      @append-click="toggleTextVisibility"
    />
    <pa-input-group 
      v-model="clearableText" 
      append-icon="times-light" 
      label="Clearable Input" 
      placeholder="Enter text"
      @append-click="clearInput"
    />
  </div>
</template>

Prepend Text

Add static text that appears when the field is focused or has a value.

Prepending not working

Price$

*

Username@

*

Websitehttps://

*

<template>
  <div>
    <pa-input-group 
      v-model="price" 
      prepend="$" 
      label="Price" 
      type="currency" 
      placeholder="0.00" 
    />
    <pa-input-group 
      v-model="username" 
      prepend="@" 
      label="Username" 
      placeholder="username" 
    />
    <pa-input-group 
      v-model="website" 
      prepend="https://" 
      label="Website" 
      placeholder="example.com" 
    />
  </div>
</template>

Combined Elements

Combine icons, text, and labels for complex input layouts.

Combined elements not working

Username@

*

Amount$

*

<template>
  <div style="display: flex; flex-direction: column; gap: 1rem;">
    <pa-input-group 
      v-model="username" 
      prepend-icon="user-regular" 
      prepend="@" 
      append-icon="check" 
      label="Username" 
      placeholder="username"
      @append-click="validateUsername"
    />
    <pa-input-group 
      v-model="amount" 
      prepend-icon="dollar-sign-regular" 
      prepend="$" 
      append-icon="calculator" 
      label="Amount" 
      type="currency" 
      placeholder="0.00"
      @append-click="openCalculator"
    />
  </div>
</template>

States and Validation

Input groups with different states and validation.

Required Field

*

Disabled Field

*

<template>
  <div>
    <pa-input-group 
      v-model="requiredField" 
      label="Required Field" 
      required 
      placeholder="This field is required" 
    />
    <pa-input-group 
      v-model="disabledField" 
      label="Disabled Field" 
      disabled 
      placeholder="Cannot edit this" 
    />
    <!-- Validation rules can be added programmatically -->
    <pa-input-group 
      v-model="validatedField" 
      label="With Custom Validation" 
      :rules="validationRules" 
      placeholder="Validation rules applied"
    />
  </div>
</template>

Importing

import { PaInputGroup } from '@payadvantage/ui_components'

Properties

Name	Description	Reflects	Type	Default
modelValue	The input's value (used with v-model).	no	string | number | null	undefined
type	The input type. For 'currency', uses pa-currency-input internally. For other types, uses pa-input which supports 'text' and 'number' only.	no	'text' | 'number' | 'currency'	'text'
label	Floating label text that appears above the input when focused or filled.	no	string	''
placeholder	Placeholder text shown when the input is empty and focused.	no	string	''
disabled	Disables the input group.	no	boolean	false
required	Marks the input as required for validation.	no	boolean	false
min	Minimum value for number/currency inputs.	no	number | null	null
max	Maximum value for number/currency inputs.	no	number | null	null
maxlength	Maximum length for text inputs.	no	number | null	null
pattern	Pattern for input validation (regex).	no	string | null	null
mask	Input mask for formatting (e.g., phone numbers).	no	string | null	null
prepend	Static text that appears on the left when focused or filled.	no	string	''
prependIcon	Icon to display on the left side of the input.	no	string	''
appendIcon	Icon to display on the right side of the input.	no	string	''
iconVariant	Variant/color for the prepend and append icons.	no	string	'dark'
rules	Validation rules array for the input.	no	ValidationRule[]	[]
sfSelector	Custom selector for testing frameworks.	no	string	''

Events

Name	Description	Event Detail
update:modelValue	Emitted when the input's value changes (for v-model).	New value
change	Emitted when the input value changes and loses focus.	New value
focus	Emitted when the input receives focus.	Focus event
blur	Emitted when the input loses focus.	Blur event
submit	Emitted when Enter key is pressed.	None
prependClick	Emitted when the prepend icon is clicked.	Input group instance
appendClick	Emitted when the append icon is clicked.	Input group instance

Methods

Name	Description	Parameters
focus()	Programmatically focus the input.	None

Slots

The input group component does not support custom slots.

Dependencies

• PaInput: Used for regular input types (text, email, password, number)
• PaCurrencyInput: Used when type is set to 'currency'
• PaIcon: Used for prepend and append icons
• Validation System: Built-in validation with visual feedback
• Bootstrap CSS: Uses Bootstrap's form control styling system

Design Notes

The input group component provides:

• Floating labels: Smooth animations and proper positioning based on state
• Icon integration: Clickable icons with customizable variants and positioning
• Flexible input types: Automatic component selection based on type prop
• Enhanced validation: Built-in validation message display with error states
• Accessibility: Proper focus management and screen reader support
• Responsive design: Adapts to different screen sizes and contexts

This component is ideal for:

• Form interfaces requiring enhanced visual design
• User registration and login forms
• Search inputs with action buttons
• Currency and financial input fields
• Any input requiring additional visual context or actions

Accessibility Notes

• Uses semantic HTML input elements for proper screen reader support
• Maintains focus states for keyboard navigation
• Labels are properly associated with inputs using the for attribute
• Validation messages are announced to screen readers
• Icons are implemented with proper ARIA attributes
• Required fields are marked appropriately for assistive technologies
• Focus management works correctly when icons are clicked

Type Handling

The input group automatically selects the appropriate underlying component based on the type prop:

• Currency types: Uses PaCurrencyInput for automatic currency formatting
• Text and Number types: Uses PaInput for standard input handling

Important: The underlying PaInput component only supports 'text' and 'number' types. For specialized input types like email, password, or other HTML5 input types, use the regular pa-input component directly instead of pa-input-group.

Supported Types:

• 'text' - Standard text input
• 'number' - Numeric input with number constraints
• 'currency' - Specialized currency input with formatting

This ensures that currency inputs get all the specialized formatting and validation features while other input types use the standard input component with proper type validation.