---
title: Entrada de Rádio
description: Uma entrada de rádio HTML nativa com suporte para uma ou muitas opções de elementos aninhados.
---

::InputPageHero
---
type: "Radio"
---
::

:PageToc

A entrada `radio` usa as [entradas de rádio nativas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio) do HTML para permitir que um usuário selecione um valor de uma série de opções. A propriedade `options` é obrigatória para entradas de rádio e pode ser fornecida de 3 maneiras:

- Um array de strings
- Um objeto de pares valor/rótulo
- Um array de objetos com propriedades `label` e `value` (o mesmo que as entradas [checkbox](/inputs/checkbox) e [select](/inputs/select))

### Array de strings

A maneira mais simples de fornecer opções é um array de strings. As strings fornecidas serão usadas tanto para o rótulo quanto para o valor da opção.

::Example
---
name: "Entrada de rádio"
file: "_content/.examples/radio-strings/radio-strings.vue"
---
::


### Objeto Valor / Rótulo

Você também pode fornecer a propriedade `options` onde as chaves são valores e os valores de cada propriedade são rótulos.

::Example
---
name: "Entrada de rádio"
file: "_content/.examples/radio-object/radio-object.vue"
---
::


### Array de objetos

A maneira mais flexível de definir opções é fornecendo um array de objetos. Os objetos _devem_ incluir propriedades `value` e `label` — mas também podem incluir uma propriedade `help` bem como um objeto `attrs` de atributos adicionais para aplicar a cada tag de entrada de rádio.

::Example
---
name: "Entrada de rádio"
file: "_content/.examples/radio-objects/radio-objects.vue"
---
::

## Props & Atributos

::ReferenceTable
---
input: "radio" 
without: ['prefix-icon', 'suffix-icon'] 
data: [
  {
    prop: "decorator-icon",
    type: "String",
    default: "’’",
    description:
      "Especifica <a href='/essentials/icons'>um ícone</a> para colocar na seção <code>decoratorIcon</code>. Aparece quando o rádio está selecionado. O padrão é o ícone <code>radioDecorator</code>.",
  },
  {
    prop: "options",
    type: "Array/Object",
    default: "[]",
    description:
      "Um objeto de pares valor/rótulo ou um array de strings, ou um array de objetos que <em>devem</em> conter uma propriedade de rótulo e valor.",
  },
]
---
::


## Seções

:SectionKeysIntro

::FormKitInputDiagram
---
class: "input-diagram--radio radio-multiple"
schema: [
  {
    name: "outer",
    children: [
      {
        name: "fieldset",
        children: [
          {
            name: "legend",
            content: "Preferência de horário para cortar a grama",
            class: "margin-collapse",
            position: "right",
          },
          {
            name: "help",
            content: "Escolha qual horário é menos disruptivo para você.",
            position: "right",
          },
          {
            name: "options",
            position: "right",
            children: [
              {
                name: "option",
                position: "right",
                children: [
                  {
                    name: "wrapper",
                    position: "right",
                    children: [
                      {
                        name: "inner",
                        children: [
                          {
                            name: "prefix",
                          },
                          {
                            name: "input",
                          },
                          {
                            name: "decorator",
                            children: [
                              {
                                name: "decoratorIcon",
                                content: "🔘",
                              }
                            ]
                          },
                          {
                            name: "suffix",
                          },
                        ]
                      },
                      {
                        name: "label",
                        content: "Manhã",
                        position: "right",
                        class: "margin-standard center-vert"
                      }
                    ]
                  },
                  {
                    name: "optionHelp",
                    content: "Viremos entre 7-11 da manhã nas terças-feiras.",
                    position: "right",
                  },
                ]
              }
            ]
          }
        ]
      },
      {
          name: "messages",
          position: "right",
          children: [
            {
              name: "message",
              content: "Você deve fazer uma seleção.",
              position: "right",
            }
          ]
        }
    ]
  }
]
---
::

::ReferenceTable
---
type: "sectionKeys"
primary: "section-key" 
without: ["prefixIcon", "suffixIcon"] 
data: [
  {
    "section-key": "decorator",
    description:
      "Responsável pelo elemento imediatamente após o elemento de entrada — geralmente usado para estilização.",
  },
  {
    "section-key": "decoratorIcon",
    description: "Um elemento contendo o ícone decorativo.",
  },
  {
    "section-key": "legend",
    description: "Responsável pelo elemento legend do fieldset.",
  },
  {
    "section-key": "fieldset",
    description:
      "Responsável pelo fieldset quando múltiplas opções estão disponíveis.",
  },
  {
    "section-key": "options",
    description:
      "Responsável pelo elemento de wrapper em torno de todos os itens de opção.",
  },
  {
    "section-key": "option",
    description: "Responsável pelo wrapper em torno de cada item nas opções.",
  },
]
---
::

Acessibilidade

Todos os campos de entrada do FormKit são projetados levando em consideração as seguintes considerações de acessibilidade. Ajude-nos a melhorar continuamente a acessibilidade para todos, relatando problemas de acessibilidade aqui:

Rádio único

Rádio múltiplo

Interações com o Teclado