Email Field

The Email Field component provides a text input with built-in email validation and formatting.

Basic Usage

Required Email

Field Schema

An email field is authored as EmailFieldMetadata (@object-ui/types), which is the source of truth for the key set: it extends BaseFieldMetadata with a single length bound. Address-shape validation is the widget's, not a metadata key.

import type { EmailFieldMetadata } from '@object-ui/types';

const contactEmail: EmailFieldMetadata = {
  type: 'email',
  name: 'contact_email',
  label: 'Email Address',
  placeholder: 'name@example.com',
  required: true,
  max_length: 254,
};

The value being edited, and the className / disabled a host supplies, are not metadata keys — they are runtime widget props. See Field Widget Props.

Validation

The email field automatically validates:

• Proper email format (user@domain.com)
• Presence of @ symbol
• Valid domain structure
• No spaces or invalid characters

Cell Renderer

In tables/grids, email addresses are clickable links:

import { EmailCellRenderer } from '@object-ui/fields';

// Renders as: <a href="mailto:user@example.com">user@example.com</a>
// Clicking opens default email client

Use Cases

• User Registration: Account email addresses
• Contact Forms: Customer contact information
• Support: Support ticket emails
• Notifications: Email notification addresses
• Team Members: Team member email addresses

Features

• Autocomplete: Browser email autocomplete
• Validation: Real-time email format validation
• Clickable Links: Email links in read-only mode
• Accessible: Proper ARIA labels and keyboard navigation