TelField

Description

A telephone number input field component that integrates with React Hook Form. Uses the HTML tel input type for better mobile keyboard support.

Import

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

Usage

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

function ContactForm() {
  return (
    <Form action="/api/contact">
      <TelField
        name="phone"
        label="Phone Number"
        required
      />
    </Form>
  );
}

Props

Name	Type	Default	Description
name	FieldPath<T>	-	Field name (required)
label	string	-	Label text displayed above the input
required	boolean	false	Makes the field required
error	string	-	Custom error message
helperText	string	-	Helper text shown in a tooltip
validation	RegisterOptions<T>	-	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
wrapperClassName	string	-	CSS class for the wrapper div
...props	InputHTMLAttributes	-	All standard HTML input attributes

Example: With Validation

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

function PhoneForm() {
  return (
    <Form action="/api/phone">
      <TelField
        name="phone"
        label="Phone Number"
        placeholder="+1 (555) 123-4567"
        required
        validation={{
          pattern: {
            value: /^[\d\s\-\+\(\)]+$/,
            message: 'Please enter a valid phone number'
          }
        }}
      />
    </Form>
  );
}

Example: With Icon

import { Form } from '@components/common/form/Form';
import { TelField } from '@components/common/form/TelField';
import { Phone } from 'lucide-react';

function EmergencyForm() {
  return (
    <Form action="/api/emergency">
      <TelField
        name="emergencyContact"
        label="Emergency Contact"
        placeholder="Enter phone number"
        required
        prefixIcon={<Phone size={16} />}
      />
    </Form>
  );
}

Features

• Mobile Optimized: Uses tel input type for numeric keyboard on mobile devices
• Icon Support: Add prefix or suffix icons
• Flexible Format: No built-in format restrictions, add your own validation pattern
• TypeScript Support: Full type safety with generics

Related Components

• Form - Parent form component
• EmailField - Email input field
• InputField - General text input