# Email

O componente do tipo <mark style="color:blue;">email</mark> deve ser utilizado quando o criador do tema disponibiliza ao usuário a inserção e/ou modificação de um e-mail dentro do tema. A única diferença desse campo para o <mark style="color:blue;">text</mark> é que ele terá o processo de validação no momento de input do usuário, aferindo uma maior segurança. Abaixo é possível visualizar a aparência deste campo e sua validação.

<figure><img src="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FhzO7YwVSejW7hiT3WRib%2Fimage_1.png?alt=media&#x26;token=357389c3-1232-4ecb-b6a4-b7e88e208a00" alt=""><figcaption><p><strong>Exibição do campo e-mail</strong> </p></figcaption></figure>

<figure><img src="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FQWZr5Y2gTjJXeI5HRSW2%2Fimage_2.png?alt=media&#x26;token=acd8b967-c36d-41cb-a326-c4334208a87d" alt=""><figcaption><p><strong>Exibição do campo e-mail preenchido</strong></p></figcaption></figure>

<figure><img src="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2F7Iji4grFSxApZSszJoUj%2Fimage_3.png?alt=media&#x26;token=860720af-966e-471c-81f2-83fb3223ea12" alt=""><figcaption><p><strong>Exibição do campo e-mail com a validação realizada</strong></p></figcaption></figure>

**Estrutura padrão do campo:**

{% code overflow="wrap" %}

```json
{
    "label": "Título do campo de email",
    "type": "email",
    "description": "Descrição do campo",
    "placeholder": "Como deve ser o email inserido",
    "field": "nome_do_campo_email", 
    "validation": "required:true|max:1000"
}
```

{% endcode %}

<table><thead><tr><th width="199">Atributo</th><th>Descrição</th></tr></thead><tbody><tr><td>label</td><td>Título do campo</td></tr><tr><td>type</td><td>Tipo do campo</td></tr><tr><td>description</td><td>Descrição do campo <br>Caso não houver, deixar vazio</td></tr><tr><td>placeholder</td><td>Texto exemplificando como deve ser o texto inserido<br>Caso não houver, deixar vazio</td></tr><tr><td>field</td><td>Campo utilizado no tema para exibir o item desejado. <br>Esse nome deve ser exatamente igual ao campo criado no tema</td></tr><tr><td>validation</td><td>Validações do campo <br>Caso não houver campo obrigatório, deixar como "validation": "required:false" Os limites min e max são validações opcionais para a quantidade de caracteres mínimos e máximos permitidos nesse campo</td></tr></tbody></table>