Switch

An on / off setting that applies at once.

Turbo spin Sound Players can still mute in the game. Maintenance mode

switch.example.svelte

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

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

<div class="example-stack">
  <Switch label="Turbo spin" bind:checked={turbo} />
  <Switch label="Sound" description="Players can still mute in the game." />
  <Switch label="Maintenance mode" disabled />
</div>

Usage

Do

Use it for settings that apply at once.

Don’t

Do not use it in a form that needs a Save button; use Checkbox.

Accessibility

A native checkbox with the switch role, inside its label.

Keyboard

Switch keyboard interactions
Keys	Action
`Space`	Toggle
`Tab, Shift+Tab`	Move focus in and out

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

Switch props
Prop	Type	Default	Description
`checked`	`boolean`	`false`	Bindable in Svelte; `defaultChecked` in React.
`description`	`string`	—
`disabled`	`boolean`	`false`
`label` *required	`string`	—
`name`	`string`	—
`onCheckedChange`	`(checked: boolean) => void`	—