Switch — usage examples

Solid-only debut

Today only @rozie-ui/switch-solid is on npm; the other framework packages are in dogfooding.

Switch is designed to ship as six pre-compiled, per-framework packages from a single .rozie source. Today only the Solid package is on npm — install that one for real use. The other tabs below show the same idiomatic consumption code against each target's workspace build, for review ahead of their own debut.

Usage

tsx

// @rozie-ui/switch-react is not yet published to npm — this shows the workspace build, for review only.
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

<!-- @rozie-ui/switch-vue is not yet published to npm — this shows the workspace build, for review only. -->
<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

<!-- @rozie-ui/switch-svelte is not yet published to npm — this shows the workspace build, for review only. -->
<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)}
/>

// @rozie-ui/switch-angular is not yet published to npm — this shows the workspace build, for review only.
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)}
    />
  );
}

// Custom track/thumb content via the default SCOPED slot ({ checked, toggle }):
// pass a CHILDREN FUNCTION instead of a plain child — Solid distinguishes the
// two by `typeof children === 'function'`.
export function CustomTrackDemo() {
  const [on, setOn] = createSignal(false);
  return (
    <Switch modelValue={on()} onModelValueChange={setOn} ariaLabel="Wi-Fi">
      {(s) => <span classList={{ on: s.checked }}>{s.checked ? 'On' : 'Off'}</span>}
    </Switch>
  );
}

// @rozie-ui/switch-lit is not yet published to npm — this shows the workspace build, for review only.
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

// @rozie-ui/switch-react is not yet published to npm — this shows the workspace build, for review only.
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

<!-- @rozie-ui/switch-vue is not yet published to npm — this shows the workspace build, for review only. -->
<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

<!-- @rozie-ui/switch-svelte is not yet published to npm — this shows the workspace build, for review only. -->
<script>
  let sw;                  // component instance via bind:this
</script>

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

// @rozie-ui/switch-angular is not yet published to npm — this shows the workspace build, for review only.
@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();

// @rozie-ui/switch-lit is not yet published to npm — this shows the workspace build, for review only.
// 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