Toggle для переключателей

Компонент Toggle используется для создания переключателей состояния, аналогичных классическим переключателям включено/выключено. В Carbon Components Svelte Toggle реализован с учетом реактивности Svelte и стандартов IBM Carbon Design System.

Импорт и базовая структура

Для использования Toggle необходимо импортировать компонент из библиотеки:

Пояснения ключевых атрибутов:

  • bind:checked – двусторонняя привязка состояния переключателя. Позволяет синхронизировать переменную Svelte с состоянием Toggle.
  • labelText – текст метки рядом с переключателем.
  • id – уникальный идентификатор компонента, полезен для тестирования и доступности.

Состояния и свойства

Toggle поддерживает несколько важных свойств, влияющих на его поведение:

  • disabled – делает переключатель недоступным для взаимодействия.
  • labelA и labelB – текстовые метки для двух состояний переключателя (выключено/включено).
  • size – размер компонента, может принимать значения "sm", "md" или "lg".

Пример использования с кастомными метками:

События

Компонент генерирует стандартное событие Svelte change, которое позволяет отслеживать изменения состояния:

 console.log('Новое состояние:', e.detail.checked)}
/>
  • e.detail.checked возвращает текущее состояние переключателя.
  • Можно использовать для динамического обновления других частей интерфейса в зависимости от состояния Toggle.

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

Carbon Components Svelte позволяет управлять стилями через классы и CSS-переменные. Для Toggle доступны следующие возможности:

  • Поддержка модификаторов состояния (--disabled, --small, --large).
  • Добавление пользовательских классов через class:

Интеграция с формами

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

  • name – имя поля для отправки формы.
  • value – значение при отправке, обычно "true" или "false".
  • required – делает поле обязательным.

Пример формы с Toggle:

 console.log(toggleState)}>

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

Toggle полностью поддерживает стандарты доступности:

  • Использует правильные aria- атрибуты (aria-checked, aria-label).
  • Метка labelText автоматически связывается с переключателем через id.
  • Поддержка клавиатурной навигации: пробел или Enter переключает состояние.

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

Toggle можно сочетать с другими элементами Carbon Components Svelte:

  • С Tooltip для объяснения функционала переключателя:

  
    При включении рекламы не будет отображаться на странице
  • С FormItem для структурирования форм:

Рекомендации по использованию

  • Использовать labelA и labelB при необходимости уточнения состояния.
  • Применять disabled для предотвращения изменений в критических сценариях.
  • Всегда задавать id для интеграции с тестами и скринридерами.
  • Для динамических интерфейсов применять bind:checked вместо отдельного обработчика on:change для упрощения синхронизации состояния.
Оглавление