Radio Group

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

Структура компонента Radio Group

В большинстве библиотек SvelteKit Radio Group состоит из двух ключевых элементов:

  1. Контейнер Radio Group – управляет общим состоянием выбора и группирует связанные радиокнопки.
  2. Элементы Radio Item – отдельные радиокнопки с собственными значениями и метками.

Пример базового синтаксиса:

<script>
  import { RadioGroup, RadioItem } from 'sveltekit-ui';
  let selectedOption = 'option1';
</script>

<RadioGroup bind:value={selectedOption}>
  <RadioItem value="option1">Вариант 1</RadioItem>
  <RadioItem value="option2">Вариант 2</RadioItem>
  <RadioItem value="option3">Вариант 3</RadioItem>
</RadioGroup>

<p>Выбран: {selectedOption}</p>

Ключевой момент: использование bind:value позволяет автоматически синхронизировать выбранное значение с переменной в скрипте, обеспечивая реактивное обновление интерфейса.

Управление состоянием и реактивность

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

<script>
  import { RadioGroup, RadioItem } from 'sveltekit-ui';
  let paymentMethod = 'card';
</script>

<RadioGroup bind:value={paymentMethod}>
  <RadioItem value="card">Карта</RadioItem>
  <RadioItem value="paypal">PayPal</RadioItem>
  <RadioItem value="crypto">Криптовалюта</RadioItem>
</RadioGroup>

{#if paymentMethod === 'card'}
  <p>Введите данные карты</p>
{/if}

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

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

SvelteKit UI libs ориентированы на соблюдение стандартов WAI-ARIA. Radio Group автоматически поддерживает:

  • Навигацию с клавиатуры (Tab для перехода между группами, стрелки для выбора внутри группы).
  • Атрибуты role="radiogroup" и role="radio" для экранных читалок.
  • Индикатор текущего выбранного элемента через aria-checked.

Пример с явным указанием ARIA:

<RadioGroup bind:value={theme} aria-label="Выберите тему">
  <RadioItem value="light" aria-label="Светлая тема">Светлая</RadioItem>
  <RadioItem value="dark" aria-label="Темная тема">Темная</RadioItem>
</RadioGroup>

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

Кастомизация внешнего вида

Компоненты Radio Group и Radio Item в SvelteKit UI поддерживают стилизацию через:

  • CSS-переменные для цветов и размеров.
  • Слоты для замены стандартного визуального элемента радиокнопки.
  • Классы для интеграции с TailwindCSS или другими CSS-фреймворками.

Пример кастомного слота для RadioItem:

<RadioGroup bind:value={color}>
  <RadioItem value="red">
    <span class="custom-radio red"></span> Красный
  </RadioItem>
  <RadioItem value="blue">
    <span class="custom-radio blue"></span> Синий
  </RadioItem>
</RadioGroup>

<style>
  .custom-radio {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #000;
    margin-right: 8px;
  }
  .red { background-color: #f00; }
  .blue { background-color: #00f; }
</style>

Вывод: слоты позволяют полностью контролировать внешний вид, сохраняя при этом реактивность и функциональность компонента.

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

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

<RadioGroup bind:value={deliveryMethod}>
  <RadioItem value="pickup">Самовывоз</RadioItem>
  <RadioItem value="courier">Доставка курьером</RadioItem>
  <RadioGroup bind:value={courierOption}>
    <RadioItem value="express">Экспресс</RadioItem>
    <RadioItem value="standard">Стандартная</RadioItem>
  </RadioGroup>
</RadioGroup>

Особенность: вложенные группы могут управлять своими локальными состояниями независимо, сохраняя общую реактивность верхнего уровня.

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

Radio Group легко интегрируется с нативными HTML-формами. Использование атрибута name позволяет отправлять выбранное значение на сервер:

<form on:submit|preventDefault={handleSubmit}>
  <RadioGroup name="gender" bind:value={gender}>
    <RadioItem value="male">Мужской</RadioItem>
    <RadioItem value="female">Женский</RadioItem>
  </RadioGroup>
  <button type="submit">Отправить</button>
</form>

<script>
  let gender = '';
  function handleSubmit() {
    console.log('Выбран пол:', gender);
  }
</script>

Преимущество: простая интеграция с формами позволяет использовать Radio Group без дополнительного обвеса для валидации или отправки данных.

Взаимодействие с библиотеками состояния

SvelteKit UI Radio Group совместим с stores и actions Svelte. Это позволяет:

  • Сохранять выбранные значения в глобальном состоянии.
  • Реагировать на изменения через подписки.
  • Интегрировать Radio Group с сложной бизнес-логикой.

Пример с writable store:

<script>
  import { writable } from 'svelte/store';
  import { RadioGroup, RadioItem } from 'sveltekit-ui';

  const themeStore = writable('light');
</script>

<RadioGroup bind:value={$themeStore}>
  <RadioItem value="light">Светлая</RadioItem>
  <RadioItem value="dark">Темная</RadioItem>
</RadioGroup>

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

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

Оглавление