Docs executáveis de HTML: Radio button

Q: Como fazer radio buttons no HTML?

Escreva um por opção, dê a todos o mesmo name e um value diferente, e coloque cada um num : Medium . O nome compartilhado faz deles um grupo em que só um pode ser selecionado.

Q: Por que consigo selecionar mais de um radio button?

Os botões não têm o mesmo name. Radio buttons só formam um grupo por meio de um name idêntico (no mesmo formulário), e só um botão por grupo pode ser selecionado.

Q: Como pegar o valor do radio button selecionado no JavaScript?

Use form.elements.size.value, em que size é o nome do grupo; ele retorna o valor do botão selecionado, ou uma string vazia se nenhum estiver selecionado. Sem formulário: document.querySelector('input[name="size"]:checked')?.value.

Q: Como definir um radio button padrão?

Adicione checked a um botão do grupo: . Se vários tiverem, o último vence.

Como fazer radio buttons no HTML

Radio buttons deixam o usuário escolher exatamente uma opção de um grupo. Cada opção é um <input type="radio">, e dar a todos o mesmo name é o que os transforma num grupo. Escolha um tamanho e aperte Order:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio buttons</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Size</legend>
      <label><input type="radio" name="size" value="s"> Small</label>
      <label><input type="radio" name="size" value="m" checked> Medium</label>
      <label><input type="radio" name="size" value="l"> Large</label>
    </fieldset>
    <p><button type="submit">Order</button></p>
  </form>
</body>
</html>

O formulário envia um par, size=m: o name do grupo e o value do botão selecionado. As partes:

O mesmo name em todos os botões do grupo. Selecionar um desmarca os outros.
Um value diferente em cada um. É isso que o servidor recebe. Um radio sem value envia on, o que não diz nada ao servidor.
checked na opção padrão.
Um <label> em volta de cada um, para que o texto seja clicável, e um <fieldset> com <legend> para que os leitores de tela anunciem a pergunta ("Size") junto com cada opção.

O name forma o grupo

Radios com nomes diferentes são grupos separados, e cada grupo tem a sua própria seleção. Este exemplo tem dois grupos, mais um conjunto quebrado em que cada radio ganhou um nome próprio por engano:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio groups</title>
  <style>
    body { font-family: system-ui, sans-serif; display: flex; flex-wrap: wrap; gap: 16px; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    .broken { border-color: #dc2626; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <fieldset>
    <legend>Crust</legend>
    <label><input type="radio" name="crust" value="thin" checked> Thin</label>
    <label><input type="radio" name="crust" value="thick"> Thick</label>
  </fieldset>
  <fieldset>
    <legend>Sauce</legend>
    <label><input type="radio" name="sauce" value="tomato" checked> Tomato</label>
    <label><input type="radio" name="sauce" value="pesto"> Pesto</label>
  </fieldset>
  <fieldset class="broken">
    <legend>Broken: different names</legend>
    <label><input type="radio" name="a" value="1"> One</label>
    <label><input type="radio" name="b" value="2"> Two</label>
    <label><input type="radio" name="c" value="3"> Three</label>
  </fieldset>
</body>
</html>

Clique nos três do grupo quebrado: todos ficam selecionados e nenhum pode ser desligado de novo, o pior dos dois mundos. Os radios se agrupam por name dentro do mesmo formulário, então dois formulários podem ter cada um o seu grupo name="size".

Grupos obrigatórios e sem padrão

required em qualquer radio do grupo significa que um deles precisa estar selecionado antes do envio. Deixar o checked de fora faz o usuário escolher ativamente, o que é o certo quando não existe um padrão razoável:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Required radio group</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>How did you hear about us?</legend>
      <label><input type="radio" name="source" value="search" required> Search engine</label>
      <label><input type="radio" name="source" value="friend"> A friend</label>
      <label><input type="radio" name="source" value="video"> A video</label>
      <label><input type="radio" name="source" value="other"> Other</label>
    </fieldset>
    <p><button type="submit">Continue</button></p>
  </form>
</body>
</html>

Aperte Continue sem escolher e o navegador impede o envio com uma mensagem. Assim que qualquer opção é escolhida, o grupo inteiro fica válido. Um grupo sem seleção que não é obrigatório não envia nada, como uma checkbox desmarcada.

Um clique pode selecionar um radio, mas nunca desmarcá-lo. Se "sem resposta" precisa ser possível depois de uma escolha, adicione uma opção explícita para isso.

Lendo o valor selecionado no JavaScript

form.elements.name retorna o grupo inteiro, e o seu .value é o valor do radio selecionado (uma string vazia quando não há nenhum). O evento change dispara no radio que foi selecionado:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selected value</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { margin-inline-end: 12px; }
    #price { font-size: 1.4em; font-weight: bold; color: #2563eb; }
  </style>
</head>
<body>
  <form id="billing">
    <label><input type="radio" name="period" value="monthly" checked> Monthly</label>
    <label><input type="radio" name="period" value="yearly"> Yearly</label>
  </form>
  <p>Price: <span id="price"></span></p>

  <script>
    const form = document.querySelector('#billing');
    const prices = { monthly: '12 per month', yearly: '96 per year' };
    const show = () => {
      document.querySelector('#price').textContent = prices[form.elements.period.value];
    };
    form.addEventListener('change', show);
    show();
  </script>
</body>
</html>

O listener fica no formulário, então pega uma mudança em qualquer um dos seus campos. Fora de um formulário, encontre o radio selecionado com document.querySelector('input[name="period"]:checked').

Comportamento no teclado

Um grupo de radios é uma única parada na ordem do Tab. O Tab entra no grupo e cai no radio selecionado (ou, quando nenhum está selecionado, no primeiro), e as setas movem a seleção entre as opções. Um novo Tab sai do grupo. Isso vem de graça com inputs radio de verdade que compartilham um name, e é mais um motivo para não recriar radios com elementos <div>.

Estilizando radio buttons

accent-color muda a cor do radio nativo. appearance: none deixa você desenhar o seu próprio círculo. E, como um radio oculto ainda pode ser selecionado pelo seu label, um grupo pode parecer um conjunto de cards mantendo todo o comportamento de radio:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .accent { accent-color: #16a34a; }

    .dot {
      appearance: none;
      width: 18px;
      height: 18px;
      margin: 0;
      border: 2px solid #6b7280;
      border-radius: 50%;
      vertical-align: middle;
    }
    .dot:checked { border: 6px solid #2563eb; }
    .dot:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

    .cards { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 16px 0 0; }
    .card { display: block; padding: 10px 14px; border: 2px solid #e5e7eb; border-radius: 10px; cursor: pointer; }
    .card input { position: absolute; opacity: 0; }
    .card:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
    .card:has(input:focus-visible) { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="radio" class="accent" name="c1" checked> accent-color</label>
  <label><input type="radio" class="accent" name="c1"> accent-color</label>
  <p>
    <label><input type="radio" class="dot" name="c2" checked> Custom</label>
    <label><input type="radio" class="dot" name="c2"> Custom</label>
  </p>
  <fieldset class="cards">
    <legend>Plan</legend>
    <label class="card"><input type="radio" name="plan" value="free" checked> Free</label>
    <label class="card"><input type="radio" name="plan" value="pro"> Pro</label>
    <label class="card"><input type="radio" name="plan" value="team"> Team</label>
  </fieldset>
</body>
</html>

O círculo personalizado é só uma borda grossa quando marcado. Os cards escondem o input com opacity: 0 em vez de display: none, então ele continua focável e as setas continuam funcionando, e :has(input:checked) estiliza o card selecionado. :has() funciona nas versões atuais de Chrome, Firefox e Safari.

Radio, checkbox ou select?

Use	Quando
Radio buttons	Uma escolha entre poucas opções (umas 2 a 6) que devem ficar todas visíveis
Checkboxes	Qualquer número de escolhas, inclusive nenhuma
Um `<select>`	Uma escolha numa lista longa, como países (veja select no HTML)

Erros comuns

names diferentes num mesmo grupo. Todo radio pode ser selecionado e nenhum pode ser desmarcado.
Nenhum value. O servidor recebe on, seja qual for a escolha.
Esconder o input com display: none num design personalizado. Ele deixa de receber foco e de funcionar com o teclado.
Nenhum <fieldset> e <legend>. Os leitores de tela anunciam "Small, botão de opção" sem a pergunta que o acompanha.
Um único radio button para uma caixa de "Eu concordo". Ele nunca pode ser desmarcado; use uma checkbox.
checked em vários radios do mesmo grupo. Só o último fica selecionado.

Perguntas frequentes

Como fazer radio buttons no HTML?

Escreva um <input type="radio"> por opção, dê a todos o mesmo name e um value diferente, e coloque cada um num <label>: <label><input type="radio" name="size" value="m"> Medium</label>. O nome compartilhado faz deles um grupo em que só um pode ser selecionado.

Por que consigo selecionar mais de um radio button?

Os botões não têm o mesmo name. Radio buttons só formam um grupo por meio de um name idêntico (no mesmo formulário), e só um botão por grupo pode ser selecionado.

Como pegar o valor do radio button selecionado no JavaScript?

Use form.elements.size.value, em que size é o nome do grupo; ele retorna o valor do botão selecionado, ou uma string vazia se nenhum estiver selecionado. Sem formulário: document.querySelector('input[name="size"]:checked')?.value.

Como definir um radio button padrão?

Adicione checked a um botão do grupo: <input type="radio" name="plan" value="free" checked>. Se vários tiverem, o último vence.

Dá para desmarcar um radio button?

Não clicando nele; um clique só seleciona. Ofereça uma opção "Nenhum", limpe o formulário ou defina button.checked = false no JavaScript. Se a escolha deve ser opcional e removível, uma checkbox ou um select pode servir melhor.

Conceitos relacionados