WP Input Components

WP Input Components provide a comprehensive set of form input elements built on top of Chakra UI and React Hook Form. These components handle validation, error display, and consistent styling across the application.

Component Overview

Core Input Components

• WPInput - Basic text input with validation
• WPNumberInput - Numeric input with validation
• WPSearchInput - Search input with clear functionality
• WPAmountInput - Currency amount input with country flags
• WPTextArea - Multi-line text input
• WPPhoneNumberInput - Phone number input with country selection
• WPPinInput - PIN/OTP input component

Version Support

The components support multiple React Hook Form versions:

• V7 - Latest components using React Hook Form v7
• V2 - Legacy components using React Hook Form v6
• Legacy - Original components without versioning

---

WPInput

Basic text input component with validation and error handling.

Component Location

import { WPInput } from 'components/Forms/WPInput';
import { WPInputField } from 'components/Forms/V7/WPInputField'; // V7 version

Props

Prop	Type	Default	Description
name	string	-	Field name for form registration
label	string	-	Input label text
placeholder	string	-	Input placeholder text
type	'text' | 'password' | 'email' | 'number'	'text'	Input type
isRequired	boolean	false	Whether field is required
isDisabled	boolean	false	Whether input is disabled
register	function	-	React Hook Form register function
control	Control	-	React Hook Form control object (V7)
rules	RegisterOptions	-	Validation rules
error	object	-	Error object from form validation
helperText	string	-	Helper text to display
LeftElement	ReactNode	-	Left side element (icon, etc.)
RightElement	ReactNode	-	Right side element (icon, etc.)

Usage Examples

Basic Input

import { WPInput } from 'components/Forms/WPInput';
import { useForm } from 'react-hook-form';

function BasicForm() {
  const { register, errors } = useForm();

  return (
    <WPInput
      name='username'
      label='Username'
      placeholder='Enter your username'
      register={register}
      error={errors.username}
      isRequired
    />
  );
}

V7 Input with Control

import { WPInputField } from 'components/Forms/V7/WPInputField';
import { useForm } from 'hook-form-7';

function V7Form() {
  const { control } = useForm();

  return (
    <WPInputField
      name='email'
      label='Email Address'
      placeholder='Enter your email'
      type='email'
      control={control}
      rules={{
        required: 'Email is required',
        pattern: {
          value: /^\S+@\S+$/i,
          message: 'Invalid email format',
        },
      }}
    />
  );
}

Input with Icons

import { WPInput } from 'components/Forms/WPInput';
import { SearchOutline, UserOutline } from 'components/WPIcons';

function InputWithIcons() {
  const { register, errors } = useForm();

  return (
    <WPInput
      name='search'
      label='Search Users'
      placeholder='Search...'
      register={register}
      error={errors.search}
      LeftElement={<SearchOutline />}
      RightElement={<UserOutline />}
    />
  );
}

---

WPNumberInput

Numeric input component with validation and formatting.

Component Location

import { WPNumberInput } from 'components/WPNumberInput';
import { WPNumberInput } from 'components/Forms/V7/WPNumberInput'; // V7 version

Props

Prop	Type	Default	Description
name	string	-	Field name for form registration
label	string	-	Input label text
placeholder	string	-	Input placeholder text
control	Control	-	React Hook Form control object
rules	RegisterOptions	-	Validation rules
defaultValue	number	-	Default value
isRequired	boolean	false	Whether field is required
isDisabled	boolean	false	Whether input is disabled
inputMode	string	'numeric'	Input mode for mobile keyboards
rightElement	ReactNode	-	Right side element

Usage Examples

Basic Number Input

import { WPNumberInput } from 'components/WPNumberInput';
import { useForm } from 'react-hook-form';

function NumberForm() {
  const { control } = useForm();

  return (
    <WPNumberInput
      name='age'
      label='Age'
      placeholder='Enter your age'
      control={control}
      rules={{
        required: 'Age is required',
        min: { value: 1, message: 'Age must be at least 1' },
        max: { value: 120, message: 'Age must be less than 120' },
      }}
    />
  );
}

Number Input with Custom Validation

import { WPNumberInput } from 'components/Forms/V7/WPNumberInput';

function CustomValidationForm() {
  const { control } = useForm();

  return (
    <WPNumberInput
      name='salary'
      label='Monthly Salary'
      placeholder='Enter amount'
      control={control}
      rules={{
        required: 'Salary is required',
        pattern: {
          value: /^[1-9]\d*$/,
          message: 'Please enter a valid number',
        },
      }}
      formHelperText='Enter your monthly salary in KES'
    />
  );
}

---

WPSearchInput

Search input component with clear functionality and search icon.

Component Location

import { WPSearchInput } from 'components/Forms/WPInput';

Props

Prop	Type	Default	Description
name	string	-	Field name
label	string	-	Input label text
placeholder	string	-	Input placeholder text
value	string	-	Current input value
onChange	function	-	Change handler
onReset	function	-	Reset/clear handler
iconColor	string	-	Search icon color
isNewDesign	boolean	false	Use new design with left icon
inputHeight	string	'2.4rem'	Input height

Usage Examples

Basic Search Input

import { WPSearchInput } from 'components/Forms/WPInput';
import { useState } from 'react';

function SearchForm() {
  const [searchValue, setSearchValue] = useState('');

  return (
    <WPSearchInput
      name='search'
      label='Search'
      placeholder='Search employees...'
      value={searchValue}
      onChange={e => setSearchValue(e.target.value)}
      onReset={() => setSearchValue('')}
    />
  );
}

New Design Search Input

import { WPSearchInput } from 'components/Forms/WPInput';

function NewDesignSearch() {
  const [searchValue, setSearchValue] = useState('');

  return (
    <WPSearchInput
      name='search'
      placeholder='Search...'
      value={searchValue}
      onChange={e => setSearchValue(e.target.value)}
      onReset={() => setSearchValue('')}
      isNewDesign
      iconColor='green'
      inputHeight='3rem'
    />
  );
}

---

WPAmountInput

Currency amount input component with country flags and validation.

Component Location

import { WPAmountInput } from 'components/Forms/V7/WPAmountInput';

Props

Prop	Type	Default	Description
name	string	-	Field name for form registration
label	string	-	Input label text
placeholder	string	-	Input placeholder text
control	Control	-	React Hook Form control object
rules	RegisterOptions	-	Validation rules
currency_flag	string	KE flag	Country flag URL
currency_code	string	'KES'	Currency code
isRequired	boolean	false	Whether field is required
isDisabled	boolean	false	Whether input is disabled
defaultValue	number	-	Default value

Usage Examples

Basic Amount Input

import { WPAmountInput } from 'components/Forms/V7/WPAmountInput';
import { useForm } from 'hook-form-7';

function AmountForm() {
  const { control } = useForm();

  return (
    <WPAmountInput
      name='amount'
      label='Amount'
      placeholder='0.00'
      control={control}
      rules={{
        required: 'Amount is required',
        min: { value: 1, message: 'Amount must be greater than 0' },
      }}
    />
  );
}

Custom Currency Amount Input

import { WPAmountInput } from 'components/Forms/V7/WPAmountInput';

function CustomCurrencyForm() {
  const { control } = useForm();

  return (
    <WPAmountInput
      name='usd_amount'
      label='USD Amount'
      placeholder='0.00'
      control={control}
      currency_flag='https://flagcdn.com/w20/us.png'
      currency_code='USD'
      rules={{
        required: 'USD amount is required',
      }}
    />
  );
}

---

WPTextArea

Multi-line text input component with validation.

Component Location

import { WPTextArea } from 'components/Forms/WPTextField';
import { WPTextArea } from 'components/Forms/V7/WPTextArea'; // V7 version

Props

Prop	Type	Default	Description
name	string	-	Field name for form registration
label	string	-	Input label text
placeholder	string	-	Input placeholder text
control	Control	-	React Hook Form control object (V7)
register	function	-	React Hook Form register function
rules	RegisterOptions	-	Validation rules
isRequired	boolean	false	Whether field is required
isDisabled	boolean	false	Whether input is disabled
helperText	string	-	Helper text to display

Usage Examples

Basic Text Area

import { WPTextArea } from 'components/Forms/WPTextField';
import { useForm } from 'react-hook-form';

function TextAreaForm() {
  const { register, errors } = useForm();

  return (
    <WPTextArea
      name='description'
      label='Description'
      placeholder='Enter description...'
      register={register}
      error={errors.description}
      isRequired
    />
  );
}

V7 Text Area

import { WPTextArea } from 'components/Forms/V7/WPTextArea';
import { useForm } from 'hook-form-7';

function V7TextAreaForm() {
  const { control } = useForm();

  return (
    <WPTextArea
      name='comments'
      label='Comments'
      placeholder='Enter your comments...'
      control={control}
      rules={{
        required: 'Comments are required',
        minLength: {
          value: 10,
          message: 'Comments must be at least 10 characters',
        },
      }}
      helperText='Please provide detailed comments'
    />
  );
}

---

WPPhoneNumberInput

Phone number input component with country selection and formatting.

Component Location

import WPPhoneNumberInput from 'components/Forms/WP-PhoneInput';
import { WPPhoneNumberInput } from 'components/Forms/V7/WPPhoneNumberInput'; // V7 version

Props

Prop	Type	Default	Description
name	string	-	Field name for form registration
label	string	-	Input label text
placeholder	string	-	Input placeholder text
control	Control	-	React Hook Form control object
rules	RegisterOptions	-	Validation rules
country	string	-	Default country code
onlyCountries	string[]	-	Restrict to specific countries
isRequired	boolean	false	Whether field is required
isDisabled	boolean	false	Whether input is disabled
defaultValue	string	-	Default phone number

Usage Examples

Basic Phone Input

import WPPhoneNumberInput from 'components/Forms/WP-PhoneInput';
import { useForm } from 'react-hook-form';

function PhoneForm() {
  const { control } = useForm();

  return (
    <WPPhoneNumberInput
      name='phone'
      label='Phone Number'
      placeholder='Enter phone number'
      control={control}
      rules={{
        required: 'Phone number is required',
      }}
    />
  );
}

V7 Phone Input with Country Restriction

import { WPPhoneNumberInput } from 'components/Forms/V7/WPPhoneNumberInput';

function RestrictedPhoneForm() {
  const { control } = useForm();

  return (
    <WPPhoneNumberInput
      name='phone'
      label='Phone Number'
      placeholder='Enter phone number'
      control={control}
      country='ke'
      onlyCountries={['ke', 'ug', 'ng']}
      rules={{
        required: 'Phone number is required',
      }}
    />
  );
}

---

WPPinInput

PIN/OTP input component for secure number entry.

Component Location

import { WPPinInput } from 'components/Forms/V7/WPPinInput';

Props

Prop	Type	Default	Description
name	string	-	Field name for form registration
label	string	-	Input label text
control	Control	-	React Hook Form control object
rules	RegisterOptions	-	Validation rules
isRequired	boolean	false	Whether field is required
autoFocus	boolean	true	Auto focus first input
size	string	'lg'	Input size
length	number	4	Number of PIN digits

Usage Examples

Basic PIN Input

import { WPPinInput } from 'components/Forms/V7/WPPinInput';
import { useForm } from 'hook-form-7';

function PinForm() {
  const { control } = useForm();

  return (
    <WPPinInput
      name='pin'
      label='Enter PIN'
      control={control}
      rules={{
        required: 'PIN is required',
        minLength: {
          value: 4,
          message: 'PIN must be 4 digits',
        },
      }}
    />
  );
}

6-Digit OTP Input

import { WPPinInput } from 'components/Forms/V7/WPPinInput';

function OTPForm() {
  const { control } = useForm();

  return (
    <WPPinInput
      name='otp'
      label='Enter OTP'
      control={control}
      length={6}
      size='md'
      rules={{
        required: 'OTP is required',
        minLength: {
          value: 6,
          message: 'OTP must be 6 digits',
        },
      }}
    />
  );
}

---

Form Layout Best Practices

Consistent Spacing

import { Stack } from '@chakra-ui/react';
import { WPInput, WPNumberInput } from 'components/Forms';

function FormLayout() {
  return (
    <Stack spacing={4}>
      <WPInput
        name='firstName'
        label='First Name'
        // ... other props
      />
      <WPInput
        name='lastName'
        label='Last Name'
        // ... other props
      />
      <WPNumberInput
        name='age'
        label='Age'
        // ... other props
      />
    </Stack>
  );
}

Error Handling

import { useForm } from 'react-hook-form';
import { WPInput } from 'components/Forms/WPInput';

function ErrorHandlingForm() {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <WPInput
        name='email'
        label='Email'
        type='email'
        register={register}
        error={errors.email}
        rules={{
          required: 'Email is required',
          pattern: {
            value: /^\S+@\S+$/i,
            message: 'Invalid email format',
          },
        }}
      />
    </form>
  );
}

Validation Rules

const validationRules = {
  required: 'This field is required',
  minLength: {
    value: 3,
    message: 'Minimum 3 characters required',
  },
  maxLength: {
    value: 50,
    message: 'Maximum 50 characters allowed',
  },
  pattern: {
    value: /^[A-Za-z\s]+$/,
    message: 'Only letters and spaces are allowed',
  },
};

Accessibility Features

• Keyboard Navigation: All inputs support keyboard navigation
• Screen Reader Support: Proper ARIA labels and descriptions
• Focus Management: Logical tab order and focus indicators
• Error Announcements: Screen readers announce validation errors
• High Contrast: Components support high contrast mode

Migration Notes

From V6 to V7

1. Control Object: Use control instead of register for V7 components
2. useController Hook: V7 components use useController internally
3. Validation: Rules are passed directly to the component
4. Error Handling: Errors are automatically handled by the component

Component Mapping

• WPInput → WPInputField (V7)
• WPNumberInput → WPNumberInput (V7 - same name)
• WPTextArea → WPTextArea (V7 - same name)
• WPPhoneNumberInput → WPPhoneNumberInput (V7 - same name)

Best Practices

1. Consistent Validation: Use consistent validation rules across forms
2. Helper Text: Provide helpful guidance for complex inputs
3. Error Messages: Write clear, actionable error messages
4. Accessibility: Always provide proper labels and ARIA attributes
5. Performance: Use controlled components judiciously to avoid re-renders
6. Types: Use TypeScript for better type safety and development experience

Related Components

• Form Components - Form architecture and patterns
• Selects - Selection input components
• Date & Time Inputs - Date and time input components
• Checkbox & Radio - Choice input components