RadioTile для выбора одного варианта

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

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

Разбор ключевых элементов:

  • RadioTileGroup — контейнер, обеспечивающий взаимную исключаемость выбора плиток. Атрибут bind:value связывает выбранное значение с переменной.

  • legend — заголовок группы, который выводится над плитками.

  • RadioTile — отдельная плитка с атрибутами:

    • value — уникальное значение плитки, которое будет присвоено переменной при выборе.
    • label — текст, отображаемый на плитке.
    • Дополнительно можно использовать disabled для блокировки плитки.

Связывание состояния выбора

С помощью привязки (bind:value) можно отслеживать выбранный вариант в переменной. Изменение переменной автоматически обновляет интерфейс, а выбор плитки обновляет переменную:

Вы выбрали: {selectedValue}

Такое связывание обеспечивает реактивность и позволяет использовать выбранное значение для логики приложения.

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

RadioTile поддерживает кастомизацию через стандартные классы Carbon:

  • light — делает плитку светлой для контрастного фона.
  • disabled — блокирует выбор плитки.
  • Можно добавлять пользовательские CSS-классы через class.

В CSS можно расширять стили плиток:

.custom-tile {
  border: 2px solid #0f62fe;
  border-radius: 8px;
}

Варианты использования

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

  
    Яблоко
  
  
    Банан
  1. Опции с дополнительным описанием Использование слота children позволяет добавить описание или иконку под заголовком плитки:

  
Доступ к расширенным функциям и поддержке 24/7

Обработка событий

RadioTileGroup поддерживает стандартные Svelte-события:

  • on:change — срабатывает при изменении выбора.
  • bind:value обеспечивает реактивное обновление, но иногда нужно выполнять дополнительные действия:
 console.log(e.detail.value)}>

e.detail.value возвращает выбранное значение плитки.

Доступность

Компонент RadioTile полностью соответствует стандартам доступности:

  • Каждая плитка реализована как радио-кнопка (role="radio").
  • Группа плиток имеет role="radiogroup".
  • Поддержка клавиатурной навигации (стрелки, Tab).
  • Поддержка ARIA-атрибутов через Carbon, что делает компонент совместимым с экранными читалками.

Комбинирование с другими компонентами Carbon

RadioTile легко интегрируется с другими элементами интерфейса:

  • Form — для отправки выбранного значения на сервер.
  • ExpandableTile — внутри RadioTile можно вставлять разворачиваемые блоки.
  • Button — для динамического изменения состояния выбора.

  
    
      
Подробности варианта A

Советы по использованию

  • Использовать RadioTileGroup всегда для нескольких плиток, чтобы гарантировать выбор только одного варианта.
  • Для динамического списка плиток можно создавать их через #each в Svelte, связывая value с объектами данных.
  • Комбинировать визуальные элементы (иконки, изображения) для более интуитивного интерфейса.
  • Не забывать про disabled для временного блокирования некоторых вариантов.
Оглавление