Email

This field is used to display email values. It uses the <Link> component of <Typography> from Ant Design.

Swizzle

You can swizzle this component to customize it with the refine CLI

Usage

Let's see how we can use <EmailField> with the example in the user list.

http://localhost:3000

import {
    List,
    useTable,
    EmailField,
} from "@refinedev/antd";
import { Table } from "antd";

const UserList: React.FC = () => {
    const { tableProps } = useTable<IPost>();

    return (
        <List>
            <Table {...tableProps} rowKey="id">
                <Table.Column dataIndex="id" title="ID" />
                <Table.Column
                    dataIndex="email"
                    title="Email"
                    render={(value: string) => <EmailField value={value} />}
                    width="100%"
                />
                ...
            </Table>
        </List>
    );
};

interface IPost {
    id: number;
    email: string;
}

tip

<EmailField> uses "mailto:" in the href prop of the <Link> component. For this reason, clicking <EmailField> opens your device's default mail application.

API Reference

External Props

It also accepts all props of Ant Design Link.

Refer to the documentation for the rest of Link properties. →