> For the complete documentation index, see [llms.txt](https://partners.tray.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://partners.tray.com.br/themes/construindo-seu-template/editor-do-tema/novo/estrutura/componentes/text.md).

# Text

O componente do tipo <mark style="color:blue;">text</mark> deve ser utilizado quando o criador do tema disponibiliza ao usuário a inserção e/ou modificação de um texto dentro do tema. Ele pode ter dois formatos: sem o ícone ou com o ícone. Abaixo é possível visualizar a aparência deste campo em suas variações.

<figure><img src="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2F5C8QRxiIUsQeqeO0rX4q%2Ftexte.png?alt=media&amp;token=b2af55d4-dc96-41ea-b0ec-92b8e4d09133" alt=""><figcaption><p><strong>Exibição do campo text sem e com ícone</strong></p></figcaption></figure>

**Estrutura padrão do campo:**

{% code overflow="wrap" %}

```json
{
    "label": "Título do campo de texto sem icone", 
    "type": "text",
    "description": "Descrição do campo",
    "placeholder": "Como deve ser o texto inserido",
    "field": "nome_do_campo_text",
    "validation": "required:true|min:10|max:30"
},

{
    "label": "Título do campo de texto", 
    "type": "text",
    "description": "Descrição do campo",
    "placeholder": "Como deve ser o texto inserido",
    "icon": "whatsapp",
    "field": "nome_do_campo_text2", 
    "validation": "required:true|min:10|max:30"
}
```

{% endcode %}

<table><thead><tr><th width="206">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><p>Texto exemplificando como deve ser o texto inserido</p><p>Caso não houver, deixar vazio</p></td></tr><tr><td>icon</td><td>Ícone a ser utilizado<br>Caso não houver, não é preciso utilizar essa chave</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"<br>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>

#### Exemplos de exibição sem ícone:

<figure><img src="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2F9Qpfao5UgxbJEjvTEsZB%2Fimage_1.png?alt=media&amp;token=417c2e8c-ed3e-4863-b30e-6469775eb9b7" alt=""><figcaption><p><strong>Exibição do campo text sem ícone</strong></p></figcaption></figure>

<figure><img src="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FgkptBaENrTXiCRIWibdc%2Fimage_2.png?alt=media&amp;token=8d3c3ba8-0613-425a-be34-34ae166cb286" alt=""><figcaption><p><strong>Exibição do campo sendo 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%2FRCt6yZwB7hLrNeqTT98p%2Fimage_3.png?alt=media&amp;token=560d849f-36e1-4713-b0fb-1f11286fe9b7" alt=""><figcaption><p><strong>Exibição do campo com a validação realizada</strong></p></figcaption></figure>

#### Exemplos de exibição com ícone:

<figure><img src="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FcfwHaNlagPmS2eRtk1qo%2Fimage%20(3).png?alt=media&amp;token=50de0021-db1a-4292-9338-896406e9b34d" alt=""><figcaption><p><strong>Exibição do campo text com ícone</strong></p></figcaption></figure>

<figure><img src="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FUzsRzKwZ5Dg4yY6XKuU3%2Fimage%20(4).png?alt=media&amp;token=b7a13d05-c355-4a5b-8dc0-2ea566a09d34" alt=""><figcaption><p><strong>Exibição do campo text sendo 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%2FC5ZbU70wtIZtGES3tFWV%2Fimage%20(5).png?alt=media&amp;token=80c6e16c-faa2-491e-a2bb-6d9cf31b6054" alt=""><figcaption><p><strong>Exibição do campo text com a validação realizada</strong></p></figcaption></figure>