EmailField

Description

An email input field component with automatic email format validation. Integrates with React Hook Form and includes support for icons and helper text.

Import

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

Usage

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

function ContactForm() {
  return (
    <Form action="/api/contact">
      <EmailField
        name="email"
        label="Email Address"
        required
      />
    </Form>
  );
}

Props

Name	Type	Default	Description
name	string	-	Field name (required)
label	string	-	Label text displayed above the input
required	boolean	false	Makes the field required
defaultValue	string	-	Default email value
error	string	-	Custom error message
helperText	string	-	Helper text shown in a tooltip
validation	RegisterOptions	-	React Hook Form validation rules
prefixIcon	React.ReactNode	-	Icon displayed on the left inside the input
suffixIcon	React.ReactNode	-	Icon displayed on the right inside the input
onChange	(value: string) => void	-	Callback fired when the value changes
wrapperClassName	string	-	CSS class for the wrapper div
...props	InputHTMLAttributes	-	All standard HTML input attributes

Example: Basic Usage

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

function SubscribeForm() {
  return (
    <Form action="/api/subscribe">
      <EmailField
        name="email"
        label="Your Email"
        placeholder="you@example.com"
        required
        helperText="We'll never share your email with anyone"
      />
    </Form>
  );
}

Example: With Icon

import { Form } from '@components/common/form/Form';
import { EmailField } from '@components/common/form/EmailField';
import { Mail } from 'lucide-react';

function LoginForm() {
  return (
    <Form action="/api/login">
      <EmailField
        name="email"
        label="Email"
        placeholder="Enter your email"
        required
        prefixIcon={<Mail size={16} />}
      />
    </Form>
  );
}

Features

• Automatic Email Validation: Built-in regex pattern for email format
• Icon Support: Add prefix or suffix icons
• Auto-cleanup: Automatically unregisters on unmount
• Type Safety: Uses HTML email input type

Validation

The component includes a default email validation pattern:

/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i

You can override this pattern by providing a custom validation rule.

Related Components

• Form - Parent form component
• InputField - General text input
• TelField - Phone number input