Skip to content

Pending Review

Pending Review from User Experience (UX)

Input Component

Overview

The PWC Input component provides a versatile text input solution with comprehensive validation, accessibility features, and design system integration. Built with Lit web components, it supports various input types, sizes, and states while maintaining consistent styling and behavior across all form contexts.

Core Capabilities

  • Multiple Input Types - Support for text, email, password, tel, url, and search input types with appropriate browser behavior
  • Size Variations - Two size options (medium, small) to accommodate different interface densities and layout requirements
  • Icon Integration - Built-in icon support with clickable icons and automatic clear button for enhanced user interaction
  • Validation Support - Real-time validation feedback with error messages and visual state indicators for user guidance
  • Loading States - Skeleton loading animation during form initialization and data fetching operations
  • Accessibility Features - Full keyboard navigation, screen reader support, and WCAG-compliant focus management

When to use Input:

  • Text data entry fields requiring user input validation and consistent styling
  • Search interfaces, login forms, and contact information collection
  • Settings and configuration forms with various text-based parameters
  • Multi-step forms where text input is part of larger data collection workflows

When not to use Input:

  • Large text content entry where Textarea component provides better user experience
  • Numeric input requiring increment/decrement controls where Number component is more appropriate
  • Password fields where Password component offers specialized security features like strength indicators

Basic Implementation

import React from 'react';
import { PwcInput } from "@progress-i360/pwc-react";

function MyComponent() {
  const handleNameChange = (event) => {
    console.log('Name changed:', event.detail);
  };

  return (
    <>
      <PwcInput
        label="Full Name"
        name="fullName"
        placeholder="Enter your full name"
        required
        onChange={handleNameChange}
      />

      <PwcInput
        label="Email Address"
        name="email"
        type="email"
        placeholder="you@example.com"
        required
      />
    </>
  );
}

import { useEffect, useRef, useState } from 'react';
import '@progress-i360/progress-web-components/input';

type InputElement = HTMLElement & { value?: string };

function ContactInputs() {
  const phoneRef = useRef<InputElement | null>(null);
  const websiteRef = useRef<InputElement | null>(null);
  const [values, setValues] = useState({ phone: '', website: '' });

  useEffect(() => {
    const phoneElement = phoneRef.current;
    const websiteElement = websiteRef.current;

    if (!phoneElement || !websiteElement) {
      return;
    }

    const handlePhoneInput = (event: Event) => {
      const detail = (event as CustomEvent<string>).detail;
      setValues((prev) => ({ ...prev, phone: detail }));
    };

    const handleWebsiteInput = (event: Event) => {
      const detail = (event as CustomEvent<string>).detail;
      setValues((prev) => ({ ...prev, website: detail }));
    };

    phoneElement.addEventListener('pwc-input', handlePhoneInput);
    websiteElement.addEventListener('pwc-input', handleWebsiteInput);

    return () => {
      phoneElement.removeEventListener('pwc-input', handlePhoneInput);
      websiteElement.removeEventListener('pwc-input', handleWebsiteInput);
    };
  }, []);

  useEffect(() => {
    if (phoneRef.current) {
      phoneRef.current.value = values.phone;
    }
    if (websiteRef.current) {
      websiteRef.current.value = values.website;
    }
  }, [values]);

  return (
    <>
      <pwc-input
        ref={phoneRef}
        label="Phone Number"
        name="phone"
        type="tel"
        placeholder="(555) 123-4567"
      ></pwc-input>

      <pwc-input
        ref={websiteRef}
        label="Website URL"
        name="website"
        type="url"
        placeholder="https://example.com"
      ></pwc-input>
    </>
  );
}

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@progress-i360/progress-web-components/input";

@Component({
  selector: 'input-demo',
  template: `
    <pwc-input 
      label="Search Products" 
      placeholder="Type to search..." 
      iconKey="search"
      [long]="isWideLayout"
      (pwc-input)="handleSearch($event)"
      (pwc-icon-click)="clearSearch()">
    </pwc-input>

    <pwc-input 
      label="Email Address" 
      type="email" 
      required
      hint="We'll never share your email"
      (pwc-change)="validateEmail($event)">
    </pwc-input>

    <pwc-input 
      label="Phone Number" 
      type="tel" 
      pattern="^(\+\d{1,3}[- ]?)?\d{10}$"
      [disabled]="!emailValid"
      (pwc-change)="updatePhone($event)">
    </pwc-input>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class InputDemo {
  isWideLayout = false;
  emailValid = false;
  searchResults: string[] = [];

  handleSearch(event: any) {
    const query = event.detail;
    this.searchResults = query ? [`Result for "${query}"`] : [];
    this.isWideLayout = query.length > 10;
  }

  clearSearch() {
    this.searchResults = [];
    this.isWideLayout = false;
  }

  validateEmail(event: any) {
    const email = event.detail;
    this.emailValid = email.includes('@') && email.includes('.');
  }

  updatePhone(event: any) {
    console.log('Phone updated:', event.detail);
  }
}

import '@progress-i360/progress-web-components/input';

const input = document.createElement('pwc-input');
input.setAttribute('label', 'Email Address');
input.setAttribute('name', 'email');
input.setAttribute('type', 'email');
input.setAttribute('required', 'true');

input.addEventListener('pwc-change', (event) => {
  console.log('Email entered:', event.detail);
});

document.body.appendChild(input);

Usage Patterns

  • Form Data Collection - Collect structured user information like names, addresses, contact details with appropriate validation
  • Search and Filter - Implement search functionality with real-time input handling and icon interactions for enhanced UX
  • Settings Configuration - Capture configuration values, API keys, and system parameters with proper validation and hints
  • Content Creation - Enable text content input for titles, descriptions, and metadata with length constraints and formatting

Best Practices

Content Strategy Guidelines

  • Clear Label Text - Use descriptive labels that clearly indicate what information is expected from users
  • Helpful Placeholders - Provide example text that demonstrates the expected format or content type
  • Appropriate Input Types - Choose the correct input type (email, tel, url) to trigger appropriate mobile keyboards and validation
  • Meaningful Hint Text - Use hints to provide additional context, format requirements, or usage guidance

Performance Optimization

  • Debounced Input Handling - Implement debouncing for real-time search and validation to reduce processing overhead
  • Efficient Event Management - Use appropriate event types (input vs change) based on whether real-time or final value processing is needed
  • Validation Timing - Validate on blur or change events rather than on every keystroke to improve performance
  • Memory Management - Properly dispose of event listeners and form subscriptions when inputs are removed

Integration Architecture

  • Form Context Integration - Leverage form context for validation state management and submission handling
  • Accessibility Standards - Ensure proper ARIA attributes, keyboard navigation, and screen reader compatibility
  • Design System Consistency - Use appropriate size, spacing, and color tokens for consistent visual integration
  • Responsive Design - Consider long input option for wider layouts and responsive behavior across screen sizes

Common Use Cases

User Registration

  • Personal information collection with name, email, and contact detail inputs
  • Account creation with username, password confirmation, and profile information
  • Address and shipping information with structured input validation

Contact Forms

  • Inquiry forms with name, email, subject, and message fields
  • Support ticket creation with structured information collection
  • Feedback forms with categorized input fields and optional information

Search Interfaces

  • Product search with real-time filtering and suggestions
  • Content discovery with keyword-based search functionality
  • Database query interfaces with structured search parameters

Troubleshooting

Common Issues

Actions Not Triggering

Symptoms: Input events (change, input, icon-click) don't fire or respond correctly

Solutions:

  • Verify event listeners are attached to correct event names (pwc-change, pwc-input, pwc-icon-click)

  • Check that input is not disabled or readonly when events should be firing

  • Ensure form context is properly configured if using form integration

Actions Not Visible

Symptoms: Input field doesn't appear, icons don't display, or validation messages are missing

Solutions:

  • Confirm input component is properly imported and registered

  • Check that iconKey property matches available icons in the design system

  • Verify validation messages are enabled and error states are properly configured

Layout Issues

Symptoms: Input fields appear with incorrect sizing, spacing, or alignment

Solutions:

  • Use appropriate size property (m, s) for the interface context and layout density

  • Apply long property for inputs that need extended width in wider layouts

  • Check parent container styling doesn't conflict with input sizing and positioning

Icon Problems

Symptoms: Icons don't appear, clear button doesn't work, or icon clicks don't respond

Solutions:

  • Verify icon system is loaded and specified iconKey exists in icon library

  • Check that clear functionality works by ensuring input has value and is not disabled

  • Ensure icon click handlers are properly bound and event propagation isn't prevented

Implementation Support

  • Form Architecture - Integration patterns for complex forms with validation, submission handling, and error management
  • Accessibility Compliance - WCAG implementation strategies for input labeling, validation feedback, and keyboard navigation
  • Design System Integration - Guidance for consistent styling, spacing, and interaction patterns across input implementations

Resources

Storybook Documentation

For comprehensive API documentation, interactive examples, and testing tools: 📖 View Complete API Documentation in Storybook →

This guide provides high-level implementation guidance. For detailed API specifications and interactive examples, visit our Storybook documentation.