Радиокнопка в HTML - input radio

Введение

Радиокнопка (radio button) в HTML — это элемент формы, который позволяет пользователю выбрать один вариант из заранее заданного набора. Если вы хотите, чтобы из нескольких ответов можно было выбрать только один — обычно используют именно input с типом radio.

Радиокнопки встречаются почти везде — от анкет и форм регистрации до фильтров в интернет‑магазинах. Важно понимать не только базовый синтаксис, но и то, как правильно группировать варианты, обрабатывать выбор на стороне клиента и сервера, а также как стилизовать радиоэлементы под дизайн интерфейса.

Давайте подробно разберем, как работает input type="radio", какие у него особенности и какие ошибки чаще всего допускают разработчики.

Базовый синтаксис радиокнопки

Простейший пример

Сначала посмотрим самый простой пример использования радиокнопок:

<form>
  <!-- Одна группа радиокнопок с именем "gender" -->
  <label>
    <input type="radio" name="gender" value="male">
    Мужчина
  </label>

  <label>
    <input type="radio" name="gender" value="female">
    Женщина
  </label>
</form>

Комментарии к примеру:

• type="radio" — сообщает браузеру, что это радиокнопка.
• name="gender" — объединяет кнопки в одну логическую группу.
• value="male" и value="female" — значения, которые будут отправлены на сервер при выборе соответствующей опции.
• Оборачивание input в label позволяет кликать по тексту, а не только по маленькой точке.

Смотрите, как это работает: внутри одной формы все элементы input type="radio" с одинаковым атрибутом name образуют группу, в которой можно выбрать только один вариант.

Роль атрибута name

Атрибут name — ключевой для радиокнопок.

• Радиокнопки с одинаковым значением name — это одна группа.
• Радиокнопки с разными значениями name — независимые группы.

Давайте разберемся на примере:

<form>
  <!-- Первая группа - выбор пола -->
  <p>Пол</p>
  <label>
    <input type="radio" name="gender" value="male">
    Мужчина
  </label>
  <label>
    <input type="radio" name="gender" value="female">
    Женщина
  </label>

  <!-- Вторая группа - выбор возраста -->
  <p>Возраст</p>
  <label>
    <input type="radio" name="age" value="18-25">
    18-25
  </label>
  <label>
    <input type="radio" name="age" value="26-35">
    26-35
  </label>
</form>

• При выборе пола вы не можете выбрать сразу и Мужчина, и Женщина — это одна группа, name="gender".
• Но вы можете одновременно выбрать и возраст — у этой группы другое имя, name="age".

Если вы случайно дадите двум независимым группам одно и то же имя, поведение сломается — пользователь сможет выбрать только один вариант из всех этих кнопок. Это частая ошибка.

Атрибут value и отправка формы

Когда форма отправляется на сервер, из каждой группы радиокнопок отправляется только одно значение — то, у которого стоит атрибут checked (либо тот, который пользователь выбрал вручную).

Теперь вы увидите, как это выглядит в коде с отправкой:

<form action="/submit" method="post">
  <p>Выберите цвет</p>
  <label>
    <input type="radio" name="color" value="red" checked>
    Красный
  </label>
  <label>
    <input type="radio" name="color" value="green">
    Зеленый
  </label>
  <label>
    <input type="radio" name="color" value="blue">
    Синий
  </label>

  <button type="submit">Отправить</button>
</form>

Комментарии:

// При загрузке страницы по умолчанию выбран "red"
// На сервер уйдет пара "color=red", "color=green" или "color=blue"
// в зависимости от того, что выбрал пользователь

Если вы забудете указать value, то при отправке формы значение по умолчанию будет "on", что обычно неудобно для обработки на сервере.

Группировка радиокнопок и логика выбора

Как формируется группа

Группа радиокнопок определяется:

• одинаковым значением атрибута name;
• контекстом формы (одна HTML-страница, но не обязательно одна form — об этом ниже).

Браузер хранит состояние для каждой группы и гарантирует, что одновременно может быть выбрано только одно значение из группы.

Обратите внимание на такой нюанс: радиокнопки с одинаковым name считаются одной группой даже если находятся в разных формах. Это может привести к неожиданному поведению, поэтому чаще всего лучше не повторять имя радиокнопок в разных формах.

<!-- Две формы, но одинаковое имя у радиокнопок -->
<form>
  <label>
    <input type="radio" name="plan" value="basic">
    Базовый
  </label>
</form>

<form>
  <label>
    <input type="radio" name="plan" value="pro">
    Профессиональный
  </label>
</form>

В этом примере по стандарту эти элементы формируют одну группу. На практике так лучше не делать — используйте уникальные name внутри разных форм.

Атрибут checked — выбор по умолчанию

Атрибут checked позволяет задать значение по умолчанию. Смотрите, я покажу вам, как это работает:

<label>
  <input type="radio" name="lang" value="js" checked>
  JavaScript
</label>
<label>
  <input type="radio" name="lang" value="py">
  Python
</label>
<label>
  <input type="radio" name="lang" value="go">
  Go
</label>

Комментарии:

// При первой загрузке страницы выбран "JavaScript"
// Пользователь может переключиться на Python или Go
// В группе радиокнопок актуален только один checked в каждый момент времени

Важно: если в HTML вы укажете нескольким радиокнопкам в одной группе атрибут checked, по спецификации выбранной будет считаться последняя в порядке появления в документе. На практике так делать не стоит — это лишь добавит путаницу.

Можно ли снять выбор у радиокнопки

В обычном HTML интерфейсе пользователь не может снять выбор так, чтобы в группе не было отмечено ни одной опции. Всегда должна быть выбрана одна — либо явно, либо по умолчанию.

Исключения:

• Если в группе нет checked на старте и пользователь еще ничего не выбрал, группа может быть "пустой".
• С помощью JavaScript можно программно снять выбор (например, установить checked = false у всех радиокнопок группы).

Пример снятия выбора через JavaScript:

<form id="payment-form">
  <p>Способ оплаты</p>
  <label>
    <input type="radio" name="payment" value="card">
    Карта
  </label>
  <label>
    <input type="radio" name="payment" value="cash">
    Наличными
  </label>
  <button type="button" id="reset-payment">Сбросить выбор</button>
</form>

<script>
  // Находим кнопку сброса
  const resetButton = document.getElementById('reset-payment');

  resetButton.addEventListener('click', function () {
    // Находим все радиокнопки с именем "payment"
    const radios = document.querySelectorAll('input[type="radio"][name="payment"]');

    // Снимаем выбор с каждой радиокнопки
    radios.forEach(function (radio) {
      // Убираем атрибут checked на уровне DOM
      radio.checked = false;
    });
  });
</script>

Связка радиокнопок и label

Зачем использовать label

Элемент label делает взаимодействие с формой удобнее:

• Увеличивает "зону клика" — можно нажимать по тексту.
• Улучшает доступность — связывает подпись и контрол.
• Упрощает стилизацию — можно стилизовать label вместо самого input.

Есть два основных способа связать label с радиокнопкой.

Оборачивание input внутри label

Это самый простой и наглядный способ:

<label>
  <!-- Радиокнопка внутри label - связь создается автоматически -->
  <input type="radio" name="subscription" value="monthly">
  Ежемесячная подписка
</label>

Комментарии:

// Клик по тексту "Ежемесячная подписка" переключает радиокнопку
// Дополнительные атрибуты id и for не нужны

Связь по id и for

Если вам нужно отделить input и label, вы можете связать их через атрибуты id и for:

<input type="radio" name="subscription" id="sub-yearly" value="yearly">
<label for="sub-yearly">Годовая подписка</label>

Комментарии:

// Атрибут id указывает уникальный идентификатор радиокнопки
// Атрибут for у label ссылается на этот id
// Клик по label активирует соответствующую радиокнопку

Обратите внимание: значения id в документе должны быть уникальными.

Управление радиокнопками через атрибуты

Атрибут disabled

disabled делает радиокнопку недоступной для взаимодействия и исключает ее из отправки формы.

<p>Доступ к закрытой бета‑версии</p>
<label>
  <input type="radio" name="beta" value="request" disabled>
  Запросить доступ (временно недоступно)
</label>
<label>
  <input type="radio" name="beta" value="no" checked>
  Не участвовать
</label>

Комментарии:

// Первая опция видна, но ее нельзя выбрать
// В форму не попадет значение "request", даже если вы попытаетесь установить его через DevTools

Можно отключить сразу всю группу, обернув ее в fieldset с disabled.

<fieldset disabled>
  <legend>Настройки учетной записи</legend>
  <label>
    <input type="radio" name="account" value="personal" checked>
    Личная
  </label>
  <label>
    <input type="radio" name="account" value="business">
    Бизнес
  </label>
</fieldset>

Комментарии:

// Атрибут disabled на fieldset отключает все вложенные элементы формы
// Визуально браузер обычно делает такие элементы более "блеклыми"

Атрибут required

required говорит браузеру, что пользователь должен выбрать одну из опций в группе перед отправкой формы.

<form>
  <p>Выберите тип аккаунта</p>
  <label>
    <input type="radio" name="account-type" value="basic" required>
    Базовый
  </label>
  <label>
    <input type="radio" name="account-type" value="premium">
    Премиум
  </label>

  <button type="submit">Продолжить</button>
</form>

Комментарии:

// Атрибут required достаточно указать на одной радиокнопке из группы
// Браузер будет требовать, чтобы хотя бы одна радиокнопка с name="account-type" была выбрана
// Если пользователь не сделал выбор, появится стандартное сообщение валидации

Если у группы уже есть значение по умолчанию через checked, required все равно допустим — валидация всегда будет успешной, пока пользователь не снимет выбор программно.

Атрибут tabindex и фокус

Радиокнопки по умолчанию участвуют в табуляции и могут получать фокус. Атрибут tabindex управляет порядком перехода по Tab.

Обычно для стандартных форм достаточно поведения по умолчанию и tabindex не требуется. Если вы используете сложный кастомный интерфейс, tabindex может понадобиться для точной настройки порядка фокуса.

<label>
  <input type="radio" name="mode" value="auto" tabindex="1">
  Авто
</label>
<label>
  <input type="radio" name="mode" value="manual" tabindex="2">
  Ручной
</label>

Комментарии:

// При нажатии Tab фокус сначала перейдет к "Авто", затем к "Ручной"
// С точки зрения доступности лучше не злоупотреблять tabindex и не ломать естественный порядок

Работа с радиокнопками в JavaScript

Радиокнопки легко управляются через JavaScript — можно считывать выбранное значение, переключать опции, реагировать на событие изменения.

Как получить выбранное значение

Давайте посмотрим, что происходит в следующем примере:

<form id="color-form">
  <p>Выберите цвет темы</p>
  <label>
    <input type="radio" name="theme-color" value="light" checked>
    Светлая
  </label>
  <label>
    <input type="radio" name="theme-color" value="dark">
    Темная
  </label>
  <label>
    <input type="radio" name="theme-color" value="system">
    Как в системе
  </label>

  <button type="button" id="show-theme">Показать выбранную тему</button>
</form>

<script>
  const button = document.getElementById('show-theme');

  button.addEventListener('click', function () {
    // Находим выбранный элемент в группе по атрибуту name и псевдоклассу :checked
    const selected = document.querySelector('input[name="theme-color"]:checked');

    if (selected) {
      // Выводим значение выбранной радиокнопки
      alert('Вы выбрали тему: ' + selected.value);
    } else {
      alert('Тема не выбрана');
    }
  });
</script>

Комментарии:

// Селектор input[name="theme-color"]:checked возвращает только выбранную радиокнопку в группе
// Если пользователь не выбрал ничего и изначально нет checked, selected будет равен null

Как программно выбрать радиокнопку

Вы можете установить выбор радиокнопки, просто изменив свойство checked.

<form id="delivery-form">
  <p>Способ доставки</p>
  <label>
    <input type="radio" name="delivery" value="courier" checked>
    Курьер
  </label>
  <label>
    <input type="radio" name="delivery" value="pickup">
    Самовывоз
  </label>

  <button type="button" id="choose-pickup">Выбрать самовывоз</button>
</form>

<script>
  const choosePickupBtn = document.getElementById('choose-pickup');

  choosePickupBtn.addEventListener('click', function () {
    // Находим радиокнопку с нужным значением
    const pickupRadio = document.querySelector('input[name="delivery"][value="pickup"]');

    if (pickupRadio) {
      // Устанавливаем флаг checked
      pickupRadio.checked = true;
      // При необходимости можно вручную вызвать событие change
      pickupRadio.dispatchEvent(new Event('change', { bubbles: true }));
    }
  });
</script>

Комментарии:

// Свойство checked обновляет состояние радиокнопки и автоматически снимает выбор с других в группе
// dispatchEvent нужен, если у вас есть обработчики, которые слушают изменение группы

Отслеживание события change

Событие change срабатывает при изменении выбора в группе.

<form id="lang-form">
  <p>Язык интерфейса</p>
  <label>
    <input type="radio" name="ui-lang" value="ru" checked>
    Русский
  </label>
  <label>
    <input type="radio" name="ui-lang" value="en">
    Английский
  </label>
  <label>
    <input type="radio" name="ui-lang" value="de">
    Немецкий
  </label>
</form>

<script>
  // Находим все элементы группы
  const langRadios = document.querySelectorAll('input[name="ui-lang"]');

  langRadios.forEach(function (radio) {
    radio.addEventListener('change', function () {
      // Этот обработчик сработает при выборе любого варианта
      const selected = document.querySelector('input[name="ui-lang"]:checked');

      if (selected) {
        console.log('Выбран язык:', selected.value);
        // Здесь вы можете, например, переключать локализацию интерфейса
      }
    });
  });
</script>

Комментарии:

// Обработчик ставим на каждый input, но логика одинаковая
// Можно также навесить один обработчик на контейнер и использовать делегирование событий

Стилизация радиокнопок

Базовая стилизация

Стандартный вид радиокнопок зависит от браузера и операционной системы. Простая стилизация через свойства вроде color или background напрямую для input type="radio" почти не работает — браузер отрисовывает собственный виджет.

Минимальная настройка:

<label class="radio-basic">
  <input type="radio" name="newsletter" value="yes" checked>
  Подписаться на новости
</label>

<style>
  /* Стилизуем отступы и шрифт вокруг радиокнопки */
  .radio-basic {
    display: inline-flex; /* Располагаем элементы в линию */
    align-items: center;  /* Выравниваем по вертикали */
    gap: 0.4rem;          /* Расстояние между кружком и текстом */
    font-family: system-ui, sans-serif;
    font-size: 14px;
  }
</style>

Комментарии:

// Здесь мы не меняем внешний вид самой радиокнопки
// Мы лишь делаем аккуратный отступ и выравнивание текста относительно кружка

Полная кастомизация через скрытие стандартного input

Чтобы получить полностью кастомный дизайн, обычно скрывают стандартную радиокнопку и отрисовывают "кружок" с помощью псевдоэлементов.

Покажу вам, как это реализовано на практике:

<label class="radio-custom">
  <input type="radio" name="plan-custom" value="free" checked>
  <span class="radio-custom__mark"></span>
  <span class="radio-custom__label">Бесплатный план</span>
</label>

<label class="radio-custom">
  <input type="radio" name="plan-custom" value="pro">
  <span class="radio-custom__mark"></span>
  <span class="radio-custom__label">Pro план</span>
</label>

<style>
  .radio-custom {
    display: inline-flex;       /* Располагаем элементы в строку */
    align-items: center;        /* Выравниваем по вертикали */
    cursor: pointer;            /* Курсор-рука при наведении */
    gap: 0.5rem;                /* Отступ между кружком и текстом */
    font-family: system-ui, sans-serif;
    font-size: 14px;
  }

  .radio-custom input[type="radio"] {
    /* Полностью прячем нативный элемент, но оставляем его доступным для скринридеров */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .radio-custom__mark {
    width: 16px;
    height: 16px;
    border-radius: 50%;              /* Делаем круг */
    border: 2px solid #888;          /* Обводка */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: border-color 0.2s, background-color 0.2s;
  }

  /* Внутренняя точка */
  .radio-custom__mark::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: transparent; /* По умолчанию точка невидима */
    transition: background-color 0.2s;
  }

  /* Когда радиокнопка выбрана - подсвечиваем кружок и точку */
  .radio-custom input[type="radio"]:checked + .radio-custom__mark {
    border-color: #007bff;          /* Синяя рамка */
    background-color: #e7f1ff;      /* Легкий голубой фон */
  }

  .radio-custom input[type="radio"]:checked + .radio-custom__mark::after {
    background-color: #007bff;      /* Синяя точка в центре */
  }

  /* Стили при фокусе с клавиатуры */
  .radio-custom input[type="radio"]:focus-visible + .radio-custom__mark {
    outline: 2px solid #0056b3;     /* Видимая обводка фокуса */
    outline-offset: 2px;
  }

  /* Состояние disabled */
  .radio-custom input[type="radio"]:disabled + .radio-custom__mark {
    border-color: #ccc;
    background-color: #f5f5f5;
    cursor: not-allowed;
  }

  .radio-custom input[type="radio"]:disabled ~ .radio-custom__label {
    color: #aaa;
    cursor: not-allowed;
  }
</style>

Комментарии:

// input[type="radio"] мы прячем с помощью opacity: 0 и нулевого размера
// Визуальную часть отрисовываем в span.radio-custom__mark и его псевдоэлементе ::after
// Используем соседние селекторы + и ~ для смены стиля при checked и disabled
// Состояние фокуса показываем через outline, чтобы сохранить доступность

В таких кастомных решениях важно не забывать о:

• фокусе с клавиатуры (focus-visible);
• корректном отображении состояния disabled;
• корректной связке с label (как в примере — обертка вокруг input и визуальной части).

Доступность радиокнопок

Почему это важно

Радиокнопки часто используются в критически важных формах: регистрации, настройках профиля, платежах. Пользователи с ограниченными возможностями (например, работающие только с клавиатурой или экранными считывателями) должны иметь возможность полноценно взаимодействовать с этими элементами.

Хорошая новость: нативный input type="radio" уже изначально доступен. Нужно лишь не ломать его поведение чрезмерной кастомизацией и правильно использовать label.

Навигация с клавиатуры

Стандартное поведение:

• Tab — переход между группами и другими полями формы.
• Стрелки (влево/вправо или вверх/вниз) — перемещение между элементами внутри одной группы радиокнопок.

Если вы используете стандартные input без особых манипуляций с tabindex и не отключаете outline, то навигация будет работать "из коробки".

Семантика и ARIA-атрибуты

В большинстве случаев дополнять radio элементами ARIA-атрибутами не нужно — браузер уже сообщает скринридерам нужную информацию.

ARIA становится актуальной, если вы:

• создаете полностью кастомный виджет на div/span;
• по каким‑то причинам не можете использовать настоящий input type="radio".

Тогда вам придется вручную воссоздавать поведение:

• role="radiogroup" для контейнера;
• role="radio" для каждого элемента;
• aria-checked="true/false" для состояния выбора;
• обработку клавиатурных событий (стрелки, Tab).

Но если есть возможность — лучше использовать нативные input type="radio" и просто стилизовать их через CSS.

Радиокнопки и валидация форм

HTML5-валидация

Вы уже видели атрибут required. Помимо него, важно понимать, как обрабатывается ошибка валидации:

• Если у группы радиокнопок с required нет выбранного значения, браузер блокирует отправку формы.
• Пользователь увидит стандартное сообщение об ошибке (текст зависит от языка браузера).
• Фокус автоматически перейдет к первой радиокнопке группы.

Пример:

<form>
  <p>Примете ли вы условия соглашения</p>
  <label>
    <input type="radio" name="terms" value="yes" required>
    Да
  </label>
  <label>
    <input type="radio" name="terms" value="no">
    Нет
  </label>

  <button type="submit">Продолжить</button>
</form>

Комментарии:

// Если вы нажмете "Продолжить", не выбрав ни "Да", ни "Нет", браузер покажет ошибку
// Это удобный минимум валидации без JavaScript

Кастомные сообщения об ошибках

Если вы хотите задать собственные сообщения, можно использовать JavaScript и метод setCustomValidity.

<form id="terms-form">
  <p>Примете ли вы условия соглашения</p>
  <label>
    <input type="radio" name="terms2" value="yes" required>
    Да
  </label>
  <label>
    <input type="radio" name="terms2" value="no">
    Нет
  </label>

  <button type="submit">Продолжить</button>
</form>

<script>
  const form = document.getElementById('terms-form');
  const radios = form.querySelectorAll('input[name="terms2"]');

  form.addEventListener('submit', function (event) {
    // Находим выбранный элемент
    const selected = form.querySelector('input[name="terms2"]:checked');

    if (!selected) {
      // Отменяем отправку формы
      event.preventDefault();

      // Ставим собственное сообщение на первую радиокнопку
      const firstRadio = radios[0];
      firstRadio.setCustomValidity('Пожалуйста, выберите один из вариантов');
      firstRadio.reportValidity(); // Показываем сообщение пользователю
    } else {
      // Если все хорошо - сбрасываем сообщение об ошибке
      radios.forEach(function (radio) {
        radio.setCustomValidity('');
      });
    }
  });

  // Сбрасываем сообщение при изменении выбора
  radios.forEach(function (radio) {
    radio.addEventListener('change', function () {
      radio.setCustomValidity('');
    });
  });
</script>

Комментарии:

// setCustomValidity задает текст ошибки для конкретного элемента
// reportValidity сразу показывает ошибку под элементом, если она есть
// При следующем успешном выборе мы очищаем ошибку

Радиокнопки и серверная обработка

Как выглядит отправка данных

При отправке формы методом GET адрес может выглядеть так:

• Вы выбрали gender=male и age=18-25
• Итоговый URL будет: /submit?gender=male&age=18-25

При отправке методом POST данные будут переданы в теле запроса в таком же виде:

• gender=male&age=18-25

Если в группе радиокнопок ничего не выбрано:

• Пара name=value для этой группы вообще не попадет в запрос.
• На сервере вы получите отсутствие ключа (например, нет параметра "payment" вовсе).

Это важно учитывать: серверный код должен быть готов к тому, что параметр не придет, и обрабатывать этот случай как "значение не выбрано".

Обработка на стороне сервера (общий принцип)

Псевдокод обработки (на любом языке идею легко перенести):

// Сервер получает объект params с параметрами формы
payment = params["payment"]

if payment is null:
    // Пользователь не выбрал способ оплаты
    // Возвращаем ошибку или ставим значение по умолчанию
else if payment not in ["card", "cash", "pay-later"]:
    // Пользователь подменил значение в форме
    // Такое значение нужно отклонить
else:
    // Значение допустимо - продолжаем обработку

Комментарии:

// На сервере всегда проверяйте, что значение из радиокнопки относится к списку допустимых
// Нельзя полностью полагаться только на HTML-ограничения

Типичные ошибки при работе с input type="radio"

Одинаковый value у разных вариантов

Если вы напишете:

<label>
  <input type="radio" name="color" value="red">
  Красный
</label>
<label>
  <input type="radio" name="color" value="red">
  Зеленый
</label>

Комментарии:

// В интерфейсе все выглядит нормально - пользователь видит два разных варианта
// Но на сервер уйдет одно и то же значение "red" в обоих случаях
// Сервер не сможет понять, что именно вы выбрали

Используйте уникальные value для каждой опции в группе.

Отсутствие label

Если вы оставляете радиокнопки без label и просто пишете текст рядом в div или span, клик по тексту не будет переключать состояние радиокнопки. Кроме того, доступность сильно ухудшается.

Правильно:

<label>
  <input type="radio" name="os" value="windows">
  Windows
</label>

Либо с for/id:

<input type="radio" name="os" id="os-mac" value="macos">
<label for="os-mac">macOS</label>

Неправильная группировка по name

Если вы случайно зададите разный name у визуально объединенной группы, пользователь сможет выбрать несколько вариантов сразу.

<!-- Плохо - разные имена -->
<label>
  <input type="radio" name="tariff1" value="standard">
  Стандарт
</label>
<label>
  <input type="radio" name="tariff2" value="pro">
  Pro
</label>

Комментарии:

// Вы сможете поставить галочку сразу на обоих тарифах
// Это нарушает логику "выбрать только один вариант"

Следите, чтобы все варианты в одной логической группе имели одинаковый name.

Заключение

Радиокнопки input type="radio" — один из самых базовых, но при этом крайне важных элементов веб-форм. От того, насколько аккуратно вы их используете, зависит удобство, понятность и надежность работы интерфейса.

Ключевые моменты:

• Группа радиокнопок определяется атрибутом name — в одной группе всегда выбирается только один вариант.
• Атрибут value задает значение, которое попадет на сервер, поэтому оно должно быть осмысленным и уникальным в рамках группы.
• Атрибут checked позволяет задать выбор по умолчанию, а required — сделать выбор обязательным.
• Радиокнопки удобно оборачивать в label, чтобы расширить зону клика и улучшить доступность.
• С помощью JavaScript можно считывать выбор, переключать варианты и настраивать кастомную валидацию.
• Для продвинутого дизайна используют скрытие нативного input и кастомную отрисовку, при этом важно не сломать доступность и работу с клавиатуры.

Если вы будете внимательно относиться к именам, значениям и связке с label, а также аккуратно подходить к стилизации, радиокнопки будут работать предсказуемо и удобно для пользователей и разработчиков.

Частозадаваемые технические вопросы

Как сделать так чтобы в группе радиокнопок по умолчанию не было выбрано ни одного варианта

Не указывайте атрибут checked ни на одной радиокнопке. Группа останется без выбора до тех пор пока пользователь не нажмет один из вариантов. Если при этом нужна обязательная валидация поставьте required хотя бы на одну радиокнопку группы - браузер не даст отправить форму без выбора.

Как программно узнать индекс выбранной радиокнопки в группе

Сначала получите NodeList всех радиокнопок по name затем найдите среди них ту у которой checked true и возьмите ее индекс

const radios = document.querySelectorAll('input[name="size"]');
// Преобразуем NodeList в массив и ищем индекс
const index = Array.prototype.findIndex.call(radios, function (radio) {
  return radio.checked;
});
// Если index равен -1 - в группе ничего не выбрано

Как динамически отключить часть радиокнопок в зависимости от выбора пользователя

Используйте обработчик события change и меняйте свойство disabled у нужных элементов

const typeRadios = document.querySelectorAll('input[name="type"]');
const optionRadios = document.querySelectorAll('input[name="option"]');

typeRadios.forEach(function (radio) {
  radio.addEventListener('change', function () {
    if (radio.value === 'simple') {
      // Отключаем все дополнительные опции
      optionRadios.forEach(function (opt) {
        opt.disabled = true;   // Блокируем выбор
        opt.checked = false;   // Снимаем флажок если он стоял
      });
    } else {
      // Разрешаем выбор опций
      optionRadios.forEach(function (opt) {
        opt.disabled = false;
      });
    }
  });
});

Как синхронизировать радиокнопку с визуальным компонентом например переключателем или карточкой

Логику лучше строить вокруг настоящего input type="radio". На клик по карточке внутри обработчика устанавливайте соответствующей радиокнопке checked true и при необходимости вызывайте change

card.addEventListener('click', function () {
  const radio = card.querySelector('input[type="radio"]');
  radio.checked = true; // Переключаем реальный input
  radio.dispatchEvent(new Event('change', { bubbles: true })); // Запускаем общую логику
});

Почему радиокнопки с одинаковым name но в разных формах мешают друг другу

По спецификации группа радиокнопок определяется не формой а сочетанием документа и атрибута name. Если на одной странице есть несколько форм и в них используются одинаковые name браузер считает их одной группой. Поэтому выбирая вариант в одной форме вы сбрасываете выбор в другой. Решение - использовать уникальные name для разных форм например добавлять префикс по имени формы.