Skip to main content

InputField

Description​

A text input field component that integrates with React Hook Form. Supports validation, error display, required fields, helper text tooltips, and prefix/suffix icons.

Import​

import { InputField } from '@components/common/form/InputField';

Usage​

import { Form } from '@components/common/form/Form';
import { InputField } from '@components/common/form/InputField';

function MyForm() {
  return (
    <Form action="/api/save">
      <InputField
        name="username"
        label="Username"
        required
        helperText="Enter your username"
      />
    </Form>
  );
}

Props​

NameTypeDefaultDescription
nameFieldPath<T>-Field name (required)
labelstring-Label text displayed above the input
typestring'text'HTML input type (text, password, email, etc.)
errorstring-Custom error message to override form validation errors
helperTextstring-Helper text shown in a tooltip next to the label
requiredbooleanfalseMakes the field required and adds validation
validationRegisterOptions<T>-React Hook Form validation rules
wrapperClassNamestring-CSS class for the wrapper div
classNamestring-CSS class for the input element
prefixIconReact.ReactNode-Icon or element displayed on the left inside the input
suffixIconReact.ReactNode-Icon or element displayed on the right inside the input
...propsInputHTMLAttributes-All standard HTML input attributes (placeholder, disabled, etc.)

Example: Basic Usage​

import { Form } from '@components/common/form/Form';
import { InputField } from '@components/common/form/InputField';

function UserForm() {
  return (
    <Form action="/api/users">
      <InputField
        name="firstName"
        label="First Name"
        placeholder="Enter your first name"
        required
      />
      
      <InputField
        name="lastName"
        label="Last Name"
        placeholder="Enter your last name"
      />
    </Form>
  );
}

Example: With Validation​

import { Form } from '@components/common/form/Form';
import { InputField } from '@components/common/form/InputField';

function ValidationForm() {
  return (
    <Form action="/api/validate">
      <InputField
        name="username"
        label="Username"
        required
        validation={{
          minLength: {
            value: 3,
            message: 'Username must be at least 3 characters'
          },
          maxLength: {
            value: 20,
            message: 'Username must not exceed 20 characters'
          },
          pattern: {
            value: /^[a-zA-Z0-9_]+$/,
            message: 'Username can only contain letters, numbers, and underscores'
          }
        }}
      />
    </Form>
  );
}

Example: With Icons​

import { Form } from '@components/common/form/Form';
import { InputField } from '@components/common/form/InputField';
import { Search, User } from 'lucide-react';

function IconForm() {
  return (
    <Form action="/api/search">
      <InputField
        name="search"
        label="Search"
        placeholder="Search..."
        prefixIcon={<Search size={16} />}
      />
      
      <InputField
        name="username"
        label="Username"
        suffixIcon={<User size={16} />}
      />
    </Form>
  );
}

Example: With Helper Text​

import { Form } from '@components/common/form/Form';
import { InputField } from '@components/common/form/InputField';

function HelpForm() {
  return (
    <Form action="/api/settings">
      <InputField
        name="apiKey"
        label="API Key"
        helperText="You can find your API key in the developer settings"
        required
      />
    </Form>
  );
}

Features​

  • Automatic Validation: Integrates with React Hook Form validation
  • Error Display: Shows validation errors below the input
  • Required Indicator: Displays asterisk (*) for required fields
  • Helper Tooltips: Shows helpful information in a tooltip
  • Icon Support: Add prefix or suffix icons inside the input
  • Accessibility: Includes ARIA attributes for screen readers
  • TypeScript Support: Full type safety with generics

Notes​

  • Must be used inside a Form component or FormProvider
  • Automatically connects to React Hook Form using useFormContext
  • Error messages are automatically translated using the _() function
  • The component applies an 'error' class when validation fails
  • Icons automatically adjust input padding