Input

<pa-input> | PaInput

A form control component that allows users to enter and edit text or numeric data. Supports text and number input types, validation, masking, and accessibility features for building robust form interfaces.

<pa-input placeholder="Enter some text..." />

Examples

Basic Input

<template>
  <pa-input v-model="name" placeholder="Enter your name..." />
</template>

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

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

Input Types

The input component supports two types: text (default) and number.

<template>
  <div>
    <pa-input type="text" v-model="textValue" placeholder="Text input" />
    <pa-input type="number" v-model="numberValue" placeholder="Number input" />
  </div>
</template>

Sizes

Use the size prop to change the input size.

<template>
  <div>
    <pa-input size="sm" v-model="smallValue" placeholder="Small input" />
    <pa-input v-model="mediumValue" placeholder="Medium input (default)" />
    <pa-input size="lg" v-model="largeValue" placeholder="Large input" />
  </div>
</template>

States

Inputs can be disabled or readonly.

<template>
  <div style="display: flex; flex-direction: column; gap: 1rem;">
    <pa-input v-model="normalValue" placeholder="Normal input" />
    <pa-input disabled v-model="disabledValue" placeholder="Disabled input" />
    <pa-input readonly v-model="readonlyValue" />
  </div>
</template>

Required Fields

Use the required prop to mark fields as mandatory.

<template>
  <div>
    <pa-input required v-model="requiredField" placeholder="Required field" />
    <pa-input v-model="optionalField" placeholder="Optional field" />
  </div>
</template>

Number Inputs with Constraints

For number inputs, you can set min, max, and step constraints.

Number Input Values

Number inputs without a modelValue or v-model will internally default to NaN, which may cause console warnings. For live examples or when you need an empty number input, consider providing a default value or using v-model with null.

<template>
  <div style="display: flex; flex-direction: column; gap: 1rem;">
    <pa-input 
      type="number" 
      v-model="rangeValue" 
      :min="0" 
      :max="100" 
      placeholder="Enter value 0-100" 
    />
    <pa-input 
      type="number" 
      v-model="decimalValue" 
      :step="0.1" 
      placeholder="Decimal numbers" 
    />
  </div>
</template>

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

const rangeValue = ref(50)
const decimalValue = ref(0)
</script>

Input Masking

Use the mask prop to apply input formatting patterns.

<template>
  <div>
    <pa-input 
      v-model="phoneNumber" 
      mask="(###) ###-####" 
      placeholder="Phone number" 
    />
    <pa-input 
      v-model="date" 
      mask="##/##/####" 
      placeholder="Date (MM/DD/YYYY)" 
    />
    <pa-input 
      v-model="creditCard" 
      mask="####-####-####-####" 
      placeholder="Credit card number" 
    />
  </div>
</template>

Importing

import { PaInput } from '@payadvantage/ui_components'

Properties

Name	Description	Reflects	Type	Default
modelValue	The input's value (used with v-model).	no	string | number | null	null
type	The type of input. Only 'text' and 'number' are supported.	no	'text' | 'number'	'text'
size	The input's size.	no	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
placeholder	Placeholder text for the input.	no	string	''
disabled	Disables the input.	no	boolean	false
readonly	Makes the input readonly.	no	boolean	false
required	Marks the input as required.	no	boolean	false
name	The input's name attribute.	no	string	''
min	Minimum value constraint for number inputs.	no	number | null	null
max	Maximum value constraint for number inputs.	no	number | null	null
maxlength	Maximum character length for text inputs.	no	number | null	null
step	Step value for number inputs.	no	string | number	''
pattern	Pattern for input validation.	no	string | null	null
mask	Input masking pattern using Maska syntax (text inputs only).	no	string | null	null
maskTokens	Custom tokens for masking patterns (text inputs only).	no	object | null	null
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
focus	Emitted when the input receives focus.	Focus event
blur	Emitted when the input loses focus.	Blur event
change	Emitted when the input value changes and focus is lost.	Change event
keyup	Emitted when a key is released.	Keyboard event
keydown	Emitted when a key is pressed.	Keyboard event
select	Emitted when text is selected.	Select event

Slots

The input component does not support slots.

Dependencies

• Bootstrap CSS: Uses Bootstrap's form control styling system for consistent appearance
• Validation Mixin: Includes built-in validation capabilities with visual feedback (extends Validation mixin)
• Maska: Uses Maska library for input masking functionality on text inputs
• Vue 3: Requires Vue 3 for v-model and reactive features

Design Notes

The input component provides:

• Two input types: Text and number inputs with appropriate validation and constraints
• Flexible sizing: Five size variants (xs, sm, md, lg, xl) for different contexts
• Input masking: Advanced masking capabilities using Maska library for text inputs
• Built-in validation: Automatic validation with visual feedback states
• Form integration: Seamless v-model support and form validation

This component is ideal for:

• Form data entry requiring text or numeric input
• Masked input requirements (phone numbers, dates, credit cards) for text inputs
• Validated form fields with automatic feedback
• Responsive interfaces requiring different input sizes

Accessibility Notes

• Uses semantic HTML input elements for proper screen reader support
• Maintains focus states for keyboard navigation
• Supports ARIA attributes and validation messages through validation mixin
• Required fields are properly marked for assistive technologies
• Validation states are communicated visually and programmatically