Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Frontend Modules

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";

# Email

A standard email address according to RFC 5321, section 4.1.2. Use it for a field that holds a
contact address, such as the address a form sends to. For example, `'user@example.com'`.

## Component

In your component code, import the `Email` type from `@wix/editor-react-types`:

```ts
import type { Email } from '@wix/editor-react-types';
```

At runtime it's a plain string:

```ts
type Email = string
```

### Usage

Your code either consumes a value of type `Email` or produces one:

::::tabs
:::Consumers
In a component that receives an `Email`, apply it to a `mailto` anchor:

```tsx
import type { Email } from '@wix/editor-react-types';

function ContactLink({ contactEmail }: { contactEmail?: Email }) {
  return <a href={`mailto:${contactEmail}`}>{contactEmail}</a>;
}
```
:::
:::Producers
When your code produces an `Email`, for a context or a function return, assign a valid email
address:

```ts
import type { Email } from '@wix/editor-react-types';

const contactEmail: Email = 'user@example.com';
```
:::
::::

## Manifest

In your manifest, declare the field with the `email` dataType:

```json
{ "dataType": "email" }
```

### Declaration

Declare an `email` field in one of these ways, depending on where the value comes from:

::::tabs
:::Data-property
Declare it as a data property when the Wix user should enter the address in a panel. It takes
`dataType`, `displayName`, and an optional `defaultValue`:

```json
{
  "contactEmail": {
    "dataType": "email",
    "displayName": "Contact Email",
    "defaultValue": "user@example.com"
  }
}
```
:::
:::Context-item
Declare it as a context item when your component supplies the address to descendant components. It
takes just `dataType` and `displayName`:

```json
{
  "contactEmail": {
    "dataType": "email",
    "displayName": "Contact Email"
  }
}
```
:::
:::Function-parameter-and-return
Declare it on a function when the function accepts or returns an email address. It takes `dataType`
and an optional `displayName`, and a parameter may also set `optional`:

```json
{
  "parameters": [
    {
      "dataType": "email",
      "displayName": "Contact Email"
    }
  ],
  "returns": {
    "dataType": "email"
  }
}
```
:::
::::