Компонент Radio Group

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

Основная структура

Компонент Radio Group состоит из контейнера (RadioGroup) и отдельных элементов (Radio). Контейнер управляет состоянием выбранного элемента и предоставляет единый интерфейс для взаимодействия с набором радиокнопок.

Пример базовой структуры:

<script>
  import { RadioGroup, Radio } from 'sveltekit-ui';

  let selectedValue = 'option1';
  const options = [
    { label: 'Опция 1', value: 'option1' },
    { label: 'Опция 2', value: 'option2' },
    { label: 'Опция 3', value: 'option3' }
  ];
</script>

<RadioGroup bind:value={selectedValue}>
  {#each options as option}
    <Radio value={option.value}>
      {option.label}
    </Radio>
  {/each}
</RadioGroup>

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

bind:value синхронизирует выбранное значение с переменной в скрипте.
Каждая радиокнопка (Radio) должна иметь уникальный value.
Компонент RadioGroup гарантирует, что одновременно выбрана только одна опция.

Настройка внешнего вида

Библиотека SvelteKit UI предоставляет возможности кастомизации радиокнопок через CSS-переменные и классы.

<RadioGroup bind:value={selectedValue} class="custom-group">
  <Radio value="option1" class="custom-radio">Опция 1</Radio>
  <Radio value="option2" class="custom-radio">Опция 2</Radio>
</RadioGroup>

<style>
  .custom-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .custom-radio {
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #ccc;
    transition: background-color 0.2s;
  }
  .custom-radio[data-checked='true'] {
    background-color: #0070f3;
    color: white;
    border-color: #0070f3;
  }
</style>

Выделение выбранной опции выполняется через атрибут data-checked, который автоматически добавляется библиотекой при выборе радиокнопки.

Работа с формами

RadioGroup легко интегрируется с HTML-формами и позволяет получать выбранное значение через объект формы или отправку на сервер.

<form on:submit|preventDefault={handleSubmit}>
  <RadioGroup name="choices" bind:value={selectedValue}>
    <Radio value="option1">Опция 1</Radio>
    <Radio value="option2">Опция 2</Radio>
    <Radio value="option3">Опция 3</Radio>
  </RadioGroup>
  <button type="submit">Отправить</button>
</form>

<script>
  function handleSubmit() {
    console.log('Выбранное значение:', selectedValue);
  }
</script>

Использование атрибута name позволяет формировать стандартный объект данных формы, что особенно удобно при интеграции с бэкендом.

Управление состоянием и события

RadioGroup предоставляет события для отслеживания изменений:

on:change — срабатывает при изменении выбранной опции.
bind:value — реактивно обновляет переменную состояния при выборе нового элемента.

<RadioGroup bind:value={selectedValue} on:change={(e) => console.log(e.detail)}>
  <Radio value="option1">Опция 1</Radio>
  <Radio value="option2">Опция 2</Radio>
</RadioGroup>

Событие change возвращает объект с информацией о выбранной опции (e.detail.value).

Доступность (Accessibility)

Компонент полностью поддерживает ARIA-атрибуты:

role="radiogroup" для контейнера.
role="radio" для каждой радиокнопки.
Атрибут aria-checked отражает текущее состояние выбора.

<RadioGroup bind:value={selectedValue} aria-label="Выбор опции">
  <Radio value="option1">Опция 1</Radio>
  <Radio value="option2">Опция 2</Radio>
</RadioGroup>

Клавиатурная навигация реализована стандартно: стрелки вверх/вниз или влево/вправо переключают фокус между радиокнопками, а пробел или Enter выбирает текущую опцию.

Группировка и вложенные опции

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

<RadioGroup bind:value={category} aria-label="Категория">
  <Radio value="fruit">Фрукты</Radio>
  <Radio value="vegetable">Овощи</Radio>
</RadioGroup>

{#if category === 'fruit'}
  <RadioGroup bind:value={fruitType} aria-label="Тип фрукта">
    <Radio value="apple">Яблоко</Radio>
    <Radio value="orange">Апельсин</Radio>
  </RadioGroup>
{/if}

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

Интеграция с кастомными компонентами

Radio можно использовать совместно с иконками, изображениями или другими UI-элементами:

<RadioGroup bind:value={selectedIcon} class="icon-group">
  <Radio value="sun">
    <img src="/icons/sun.svg" alt="Солнце" />
    Солнце
  </Radio>
  <Radio value="moon">
    <img src="/icons/moon.svg" alt="Луна" />
    Луна
  </Radio>
</RadioGroup>

Компонент автоматически управляет состоянием и ARIA-атрибутами, не требуя дополнительной логики для кастомного визуального контента.