email Field Type

type: 'email' renders an email address as plain text. Adding renderAs: 'link' upgrades it to a clickable mailto: link — the link renderer auto-detects the @ symbol and builds the mailto: URL automatically.

Core Examples

Basic Email Field

Name, role, and email address displayed as plain text in table mode.

Name	Role	Email
Aurora Chen	Design Lead	aurora.chen@company.com
Mateo Silva	Platform Engineer	mateo.silva@company.com
Priya Nair	Operations	priya.nair@company.com

{ key: 'email', label: 'Email', type: 'email' }

Clickable mailto Link

Adding renderAs: 'link' renders the address as an <a href="mailto:..."> element. No url option is needed — the link renderer detects the @ and builds the mailto: URL automatically.

Email addresses rendered as clickable mailto links. Opens the default mail client.

Name	Role	Email
Aurora Chen	Design Lead	aurora.chen@company.com
Mateo Silva	Platform Engineer	mateo.silva@company.com
Priya Nair	Operations	priya.nair@company.com

{
  key: 'email',
  label: 'Email',
  type: 'email',
  renderAs: 'link',
  renderAsOptions: { newTab: true },
}

Formatter

formatter transforms the raw value before display. Common uses: normalize casing, extract the domain, or mask the local part for privacy.

Email normalized to lowercase; domain extracted into a separate column using the same key with a different formatter.

Name	Email (normalized)	Domain
Aurora Chen	aurora.chen@company.com	company.com
Mateo Silva	mateo.silva@company.com	company.com
Priya Nair	priya.nair@company.com	company.com

{
  key: 'email',
  label: 'Email (normalized)',
  type: 'email',
  formatter: (value) => String(value ?? '').toLowerCase().trim(),
},
{
  key: 'email',
  label: 'Domain',
  type: 'text',
  formatter: (value) => String(value ?? '').split('@')[1] ?? '',
},

Condition

condition receives the full entity and returns true to show the field or false to hide it entirely. Evaluated per row.

Email link is hidden for Priya (role: Operations). Aurora and Mateo show clickable mailto links.

Name	Role	Email
Aurora Chen	Design Lead	aurora.chen@company.com
Mateo Silva	Platform Engineer	mateo.silva@company.com
Priya Nair	Operations

{
  key: 'email',
  label: 'Email',
  type: 'email',
  renderAs: 'link',
  condition: (entity) => entity.role !== 'Operations',
}

Field Options Reference

Option	Type	Default	Effect
`key`	string	required	Entity property to read the value from.
`label`	string	unset	Column header or card label.
`type`	`'email'`	—	Renders as plain text. Use `renderAs: 'link'` for a clickable `mailto:` link.
`wrap`	`true`, `false`	inherited from `ItemConfig.wrap`	`false`: single line, clips with ellipsis in card modes. `true`: wraps — uses forced word-breaking since email strings have no natural break points.
`formatter`	`(value, entity) => unknown`	unset	Transforms the raw value before display. Does not mutate the entity.
`condition`	`(entity) => boolean`	unset	Hides the field for rows where the function returns `false`.
`renderAs`	`'link'`	unset	Renders as a clickable `<a>` element. Auto-generates `mailto:` URL from the value.
`renderAsOptions`	`LinkRenderAsOptions`	unset	Options forwarded to the link renderer (e.g. `newTab`, `text`, `url`).
`width`	CSS length or number	unset	Sets column width in table mode.
`align`	`'left'`, `'center'`, `'right'`	`'left'`	Text alignment in table mode.
`showLabel`	`true`, `false`	`true` when `label` is set	Shows or hides the label in card/grid layouts.

Caveats

email shares the same base renderer as text, textarea, and url — it outputs <span className="field-text"> when rendered as plain text.
wrap: true applies forced word-breaking (CSS overflow-wrap: break-word) for email fields specifically, since addresses like very.long.name@subdomain.company.com have no natural break points.
renderAs: 'link' bypasses the type rendering entirely — the link renderer handles the output. The type: 'email' declaration still matters for semantic correctness and future tooling.
No client-side email format validation is performed. Invalid values render as plain text.

Why email vs text?

They render identically today without renderAs: 'link'. The distinction matters for:

Automatic mailto detection — renderAs: 'link' on a type: 'email' field automatically prefixes mailto:. On a type: 'text' field, you would need to provide the url option manually.

Forced word-breaking — wrap: true on email applies overflow-wrap: break-word to handle the absence of natural break points. type: 'text' uses natural word boundaries only.

Forward compatibility — future inline editing will render a <input type="email"> for email fields and a <input type="text"> for text fields.

Core Examples​

Basic Email Field​

Clickable mailto Link​

Formatter​

Condition​

Field Options Reference​

Caveats​

Why email vs text?​

See Also​