@usevyre/react @usevyre/vue

Switch

A toggle control rendered as role="switch" with full keyboard support. Works controlled or uncontrolled.

States & sizes

Notifications disabled

Small size (uncontrolled)

Disabled

import { Switch } from "@usevyre/react";

// Uncontrolled
<Switch defaultChecked />

// Controlled
const [on, setOn] = useState(false);
<Switch checked={on} onCheckedChange={setOn} />

<script setup>
import { Switch } from "@usevyre/vue";
const on = ref(false);
</script>
<template>
  <!-- Uncontrolled -->
  <Switch :default-checked="true" />

  <!-- Controlled -->
  <Switch v-model="on" />
</template>

Props

Prop	Type	Default	Description
`checked`	`boolean`	`—`	Controlled on/off state.
`defaultChecked`	`boolean`	`false`	Initial state (uncontrolled).
`disabled`	`boolean`	`false`	Disables the switch.
`size`	`"sm" \| "md"`	`"md"`	Switch size.
`onCheckedChange`	`(v: boolean) => void`	`—`	React only. Called when the state changes.
`class`	`string`	`—`	Additional CSS class.

AI Context

Valid props

Prop	Values	Default
`size`	`"sm"`\|`"md"`	`md`
`checked`	`true`\|`false`	`false`
`disabled`	`true`\|`false`	`false`

Quick examples

Notifications toggle

<label style={{ display: 'flex', alignItems: 'center', gap: 'var(--vyre-spacing-2)' }}>
  <Switch checked={notifications} onChange={setNotifications} />
  Enable notifications
</label>

← Slider Table →