Примитивы

Switch

Переключатель с role="switch" и aria-checked — стили цепляются за ARIA-состояние, а не за класс. Срабатывает по клику и по Space/Enter: это настоящая кнопка.

чистая разметка — библиотеки на странице нет

отрендерил aura-react

отрендерил aura-vue

отрендерил aura-svelte

собрано из классов самого aura-angular

Notifications are on

Код

index.html

<div class="aura-group" style="--aura-gap:var(--space-3);--aura-align:center;">
  <button type="button" role="switch" aria-checked="true" data-state="checked" disabled class="aura-switch" aria-label="Disabled switch">
    <span class="aura-switch__knob"></span>
  </button>
  <button type="button" role="switch" aria-checked="true" data-state="checked" class="aura-switch" aria-label="Notifications">
    <span class="aura-switch__knob"></span>
  </button>
  <p class="aura-text aura-text--body aura-text--muted" style="">Notifications are on</p>
</div>

Demo.tsx

import { useState } from 'react';
import { Group, Switch, Typography } from '@ilomee/aura-react';

export default function Demo() {
  const [on, setOn] = useState(true);

  return (
    <Group align="center">
      <Switch defaultChecked disabled aria-label="Disabled switch" />
      <Switch checked={on} onCheckedChange={setOn} aria-label="Notifications" />
      <Typography variant="body" tone="muted">
        Notifications are {on ? 'on' : 'off'}
      </Typography>
    </Group>
  );
}

Demo.vue

<script setup lang="ts">
import { ref } from 'vue';
import { Switch } from '@ilomee/aura-vue';

const on = ref(true);
</script>

<template>
  <Switch v-model="on" aria-label="Notifications" />
</template>

Demo.svelte

<script lang="ts">
  import { Switch } from '@ilomee/aura-svelte';

  let on = $state(true);
</script>

<Switch bind:checked={on} aria-label="Notifications" />

Используется как button[auraSwitch].

demo.component.ts

import { AuraSwitch } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraSwitch],
  template: `<button auraSwitch [(checked)]="on" aria-label="Notifications"></button>`,
})
export class DemoComponent {
  on = true;
}

Расхождения с React-эталоном

Нет label. Остальные три оборачивают контрол в <label> и связывают подпись через aria-labelledby; здесь селектор — сама кнопка (button[auraSwitch]), а компонент не может обернуть собственный хост. Чтобы это изменить, нужен элементный селектор, как у Checkbox, — а это ломающее изменение для всех, у кого в шаблоне уже написано <button auraSwitch>. Пока так: подпись пишется вручную, на кнопку ставится aria-labelledby.

Пропсы

У чистой разметки нет пропсов — классы ниже и есть весь API. Четыре пакета не делают ничего сверх того, что проставляют вам те же самые классы.

Имя	Тип	По умолчанию	Примечания
label	`string`	—	Подпись рядом с переключателем; строка кликабельна. Связывается через `aria-labelledby`, а не только обёрткой: `<label>` не даёт имя элементу `<button>`, а это намеренно кнопка.
checked	`boolean`	—	Управляемое значение.
defaultChecked	`boolean`	`false`	Начальное значение для неуправляемого режима.
onCheckedChange	`(checked: boolean) => void`	—
disabled	`boolean`	—

Имя	Тип	По умолчанию	Примечания
label	`string`	—	Подпись рядом с переключателем; строка кликабельна. Связывается через `aria-labelledby`, а не только обёрткой: `<label>` не даёт имя элементу `<button>`, а это намеренно кнопка.
modelValueдвусторонний	`boolean`	—	Работает через `v-model`.
defaultChecked	`boolean`	`false`
disabled	`boolean`	`false`
update:modelValueсобытие	`(checked: boolean) => void`	—
changeсобытие	`(checked: boolean) => void`	—	Эмитится вместе с `update:modelValue`.

Имя	Тип	По умолчанию	Примечания
label	`string`	—	Подпись рядом с переключателем; строка кликабельна. Связывается через `aria-labelledby`, а не только обёрткой: `<label>` не даёт имя элементу `<button>`, а это намеренно кнопка.
checkedдвусторонний	`boolean`	`false`	`$bindable` — используйте `bind:checked`.
disabled	`boolean`	`false`
onchange	`(checked: boolean) => void`	—	Проп-колбэк.

Имя	Тип	По умолчанию	Примечания
checkedдвусторонний	`boolean`	`false`	Двусторонняя привязка через `[(checked)]`.
disabled	`boolean`	`false`
checkedChangeсобытие	`EventEmitter<boolean>`	—

Какие классы отдаёт

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

Класс	Роль	Примечания
.aura-switch	база	Обязательный. Без него модификатор не работает.
.aura-switch__knob	элемент

Токены и правила

components.css

дорожка: 46×28 · literal
кнопка: 22×22 · literal
выключен: var(--surface-3)
включён: var(--gradient)
анимация: var(--spring)
состояние: aria-checked — им всё и управляется