Primitives

Switch

Toggle with role="switch" and aria-checked — the stylesheet keys off the ARIA state, not a class. Toggles on click and on Space/Enter (it is a real button).

plain markup — no library on the page

rendered by aura-react

rendered by aura-vue

rendered by aura-svelte

built from aura-angular's own class helpers

Notifications are on

Code

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" />

Used as 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;
}

Differences from the React reference

No label. The other three wrap the control in a <label> and point aria-labelledby at the caption; this one's selector *is* the button (button[auraSwitch]), and a component cannot wrap its own host. Giving it one means the element selector Checkbox uses, which is a breaking change for anyone whose template already says <button auraSwitch>. Until then: caption it yourself and set aria-labelledby on the button.

Props

Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.

Name	Type	Default	Notes
label	`string`	—	Caption beside the switch; the row is clickable. Referenced with `aria-labelledby` rather than only wrapped — a `<label>` does not name a `<button>`, and this is a button on purpose.
checked	`boolean`	—	Controlled value.
defaultChecked	`boolean`	`false`	Uncontrolled seed.
onCheckedChange	`(checked: boolean) => void`	—
disabled	`boolean`	—

Name	Type	Default	Notes
label	`string`	—	Caption beside the switch; the row is clickable. Referenced with `aria-labelledby` rather than only wrapped — a `<label>` does not name a `<button>`, and this is a button on purpose.
modelValuetwo-way	`boolean`	—	Use with `v-model`.
defaultChecked	`boolean`	`false`
disabled	`boolean`	`false`
update:modelValueevent	`(checked: boolean) => void`	—
changeevent	`(checked: boolean) => void`	—	Emitted alongside `update:modelValue`.

Name	Type	Default	Notes
label	`string`	—	Caption beside the switch; the row is clickable. Referenced with `aria-labelledby` rather than only wrapped — a `<label>` does not name a `<button>`, and this is a button on purpose.
checkedtwo-way	`boolean`	`false`	`$bindable` — use `bind:checked`.
disabled	`boolean`	`false`
onchange	`(checked: boolean) => void`	—	Callback prop.

Name	Type	Default	Notes
checkedtwo-way	`boolean`	`false`	Two-way via `[(checked)]`.
disabled	`boolean`	`false`
checkedChangeevent	`EventEmitter<boolean>`	—

Emitted classes

Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.

Class	Role	Notes
.aura-switch	base	Required. A modifier does nothing without it.
.aura-switch__knob	element

Tokens and rules

components.css

track: 46×28 · literal
knob: 22×22 · literal
off: var(--surface-3)
on: var(--gradient)
motion: var(--spring)
state: aria-checked — им всё и управляется