Skip to main content

UrlField

Description​

A URL input field component with automatic URL format validation. Integrates with React Hook Form and supports icons and helper text.

Import​

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

Usage​

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

function WebsiteForm() {
  return (
    <Form action="/api/website">
      <UrlField
        name="website"
        label="Website URL"
        required
      />
    </Form>
  );
}

Props​

NameTypeDefaultDescription
nameFieldPath<T>-Field name (required)
labelstring-Label text displayed above the input
requiredbooleanfalseMakes the field required
defaultValuestring-Default URL value
errorstring-Custom error message
helperTextstring-Helper text shown in a tooltip
validationRegisterOptions<T>-React Hook Form validation rules
prefixIconReact.ReactNode-Icon displayed on the left inside the input
suffixIconReact.ReactNode-Icon displayed on the right inside the input
wrapperClassNamestring-CSS class for the wrapper div
...propsInputHTMLAttributes-All standard HTML input attributes

Example: Basic Usage​

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

function SocialLinksForm() {
  return (
    <Form action="/api/social">
      <UrlField
        name="twitter"
        label="Twitter Profile"
        placeholder="https://twitter.com/username"
        helperText="Enter your full Twitter profile URL"
      />
      
      <UrlField
        name="linkedin"
        label="LinkedIn Profile"
        placeholder="https://linkedin.com/in/username"
      />
    </Form>
  );
}

Example: With Icon​

import { Form } from '@components/common/form/UrlField';
import { UrlField } from '@components/common/form/UrlField';
import { Link } from 'lucide-react';

function LinkForm() {
  return (
    <Form action="/api/links">
      <UrlField
        name="homepage"
        label="Homepage"
        placeholder="https://example.com"
        required
        prefixIcon={<Link size={16} />}
      />
    </Form>
  );
}

Features​

  • Automatic URL Validation: Built-in regex pattern for URL format
  • Icon Support: Add prefix or suffix icons
  • Flexible Protocol: Accepts URLs with or without http:// or https://
  • TypeScript Support: Full type safety with generics

Validation​

The component includes a default URL validation pattern:

/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/

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