Switch — usage examples

Switch ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

tsx

import { useState } from 'react';
import { Switch } from '@rozie-ui/switch-react';

export function Demo() {
  const [on, setOn] = useState(false);
  return (
    <Switch
      modelValue={on}
      onModelValueChange={setOn}
      ariaLabel="Wi-Fi"
      onChange={(e) => console.log('switch:', e.checked)}
    />
  );
}

vue

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

const on = ref(false);
function onChange(e: { checked: boolean }) {
  console.log('switch:', e.checked);
}
</script>

<template>
  <Switch v-model:modelValue="on" aria-label="Wi-Fi" @change="onChange" />
</template>

svelte

<script lang="ts">
  import Switch from '@rozie-ui/switch-svelte';

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

<Switch
  bind:modelValue={on}
  ariaLabel="Wi-Fi"
  onchange={(e) => console.log('switch:', e.checked)}
/>

import { Component } from '@angular/core';
import { Switch } from '@rozie-ui/switch-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Switch],
  template: `
    <Switch [(modelValue)]="on" ariaLabel="Wi-Fi" (change)="onChange($event)" />
  `,
})
export class DemoComponent {
  on = false;
  onChange(e: { checked: boolean }) {
    console.log('switch:', e.checked);
  }
}

tsx

import { createSignal } from 'solid-js';
import { Switch } from '@rozie-ui/switch-solid';

export function Demo() {
  const [on, setOn] = createSignal(false);
  return (
    <Switch
      modelValue={on()}
      onModelValueChange={setOn}
      ariaLabel="Wi-Fi"
      onChange={(e) => console.log('switch:', e.checked)}
    />
  );
}

import '@rozie-ui/switch-lit';

// <rozie-switch> is a custom element. Bind `modelValue` as a property, listen
// for `model-value-change` to receive the new boolean as the two-way value, and
// `change` for the committed state.
const el = document.querySelector('rozie-switch');
el.modelValue = false;
el.ariaLabel = 'Wi-Fi';
el.addEventListener('model-value-change', (e) => {
  el.modelValue = e.detail;
});
el.addEventListener('change', (e) => {
  console.log('switch:', e.detail.checked);
});

Imperative handle

Beyond props and events, Switch exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

tsx

import { useRef } from 'react';
import { Switch, type SwitchHandle } from '@rozie-ui/switch-react';

const sw = useRef<SwitchHandle>(null);
// <Switch ref={sw} ... />
sw.current?.focus();
sw.current?.toggle();

vue

<script setup>
import { ref } from 'vue';
const sw = ref();          // template ref
</script>

<template>
  <Switch ref="sw" v-model:modelValue="on" />
  <button @click="sw.toggle()">Toggle</button>
</template>

svelte

<script>
  let sw;                  // component instance via bind:this
</script>

<Switch bind:this={sw} bind:modelValue={on} />
<button onclick={() => sw.toggle()}>Toggle</button>

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(Switch) sw!: Switch;   // or the viewChild() signal
  focusIt() { this.sw.focus(); }
  toggleIt() { this.sw.toggle(); }
}

tsx

import { Switch, type SwitchHandle } from '@rozie-ui/switch-solid';

let handle: SwitchHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<Switch ref={(h) => (handle = h)} modelValue={on()} />;
handle?.toggle();

// The custom element IS the handle — exposed methods are public element
// methods. `focus()` here DELIBERATELY overrides the inherited
// HTMLElement.focus (it focuses the control).
const el = document.querySelector('rozie-switch');
el.focus();
el.toggle();

Switch — usage examples ​

Usage ​

Imperative handle ​

See also ​

Switch — usage examples

Usage

Imperative handle

See also