> 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/radio.md).

# Radio

O componente do tipo <mark style="color:blue;">radio</mark> deve ser utilizado quando o criador do tema disponibiliza ao usuário a seleção única em uma lista limitada de opções. Seu uso é similar ao componente <mark style="color:blue;">select</mark>, porém, indica-se ser utilizado quando há menos de 3 opções. Abaixo é possível visualizar a aparência deste campo.

<figure><img src="https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FwFG0DLOnGtA7foVFLiVs%2Fradio.png?alt=media&amp;token=f6c9e23d-7334-4046-975a-56ed24c21215" alt=""><figcaption><p><strong>Exibição do campo radio</strong></p></figcaption></figure>

**Estrutura padrão do campo:**

{% code overflow="wrap" %}

```json
{
    "label": "Título do campo radio",
    "type": "radio",
    "description": "Descrição do campo de opções",
    "field": "nome_do_campo_radio",
    "options": [{
        "value": "Valor left",
        "content": "Opção 01 string riscada",
        "style": true, 
        "description": "Descrição da opção 01",
        "url": "http://images.tcdn.com.br/theme_editor/1132188/option-01.png"
    },
    {
        "value": true,
        "content": "Opção 02 boolean",
        "style": false,
        "description": "Descrição da opção 02",
        "url": "http://images.tcdn.com.br/theme_editor/1132188/option-02.png"
    },
    {
      "value": 500,
      "content": "Opção 03 number simples sem imagem",
      "description": "Descrição da opção 02"
    },
    {
      "value": [1, 2, 3],
      "content": "Opção 04 array simples sem imagem e descrição"
    }]            
}
```

{% 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>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>options</td><td>Opções do componente radio</td></tr></tbody></table>

Dentro do **`options`** do componente **`radio`**, temos outros elementos a serem configurados, segue descrição abaixo:

<table><thead><tr><th width="227">Atributo</th><th>Descrição</th><th data-hidden></th></tr></thead><tbody><tr><td>value</td><td>Valor da opção</td><td></td></tr><tr><td>content</td><td>Conteúdo da opção</td><td></td></tr><tr><td>style</td><td>Estilo da opção<br>Aplica o estilo do texto como rasurado, caso não houver, não utilizar essa chave</td><td></td></tr><tr><td>description</td><td>Descrição da opção<br>Caso não houver, deixar vazio ou não utilizar</td><td></td></tr><tr><td>url</td><td>URL da opção<br>Caso não houver, deixar vazio ou não utilizar</td><td></td></tr></tbody></table>