Vitral 0.2
Form

ToggleSwitch

An on/off switch over a native checkbox, with a header above and on/off content beside it.

WAI-ARIA tested

Import

main.ts
import { ToggleSwitch } from '@vitral/vue';

Header and state

With `show-state-label`, the locale's On/Off is shown beside the switch.

<script setup lang="ts">import { ToggleSwitch } from '@vitral/vue';import { ref } from 'vue'; const wifi = ref(true);const bluetooth = ref(false);</script> <template>    <ToggleSwitch v-model="wifi" label="Wi-Fi" show-state-label />    <ToggleSwitch v-model="bluetooth" label="Bluetooth" show-state-label /></template>

Custom content

Content shown beside the switch for each state. The second switch has no header, so it is named with aria-label.

<script setup lang="ts">import { ToggleSwitch } from '@vitral/vue';import { ref } from 'vue'; const dark = ref(false);const sync = ref(false);</script> <template>    <ToggleSwitch v-model="dark" label="Appearance" on-label="Dark" off-label="Light" />    <ToggleSwitch v-model="sync" aria-label="Sync" on-label="Syncing" off-label="Paused" /></template>

States

<script setup lang="ts">import { ToggleSwitch } from '@vitral/vue';</script> <template>    <ToggleSwitch :model-value="false" label="Invalid" invalid show-state-label />    <ToggleSwitch :model-value="false" label="Disabled" disabled show-state-label />    <ToggleSwitch :model-value="true" label="Disabled on" disabled show-state-label /></template>

API

Read from packages/vue/src/components/ToggleSwitch/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
labelstringThe header above the switch (the header, not the on/off text); it is the switch's `<label>` and so its accessible name.
onLabelstringShown beside the switch while it is on.
offLabelstringShown beside the switch while it is off.
showStateLabelbooleanShow the locale's On/Off beside the switch when no `onLabel`/`offLabel` is given.
invalidboolean—
disabledboolean—

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
changeevent: ToggleSwitchChangeEvent—
focusevent: FocusEvent—
blurevent: FocusEvent—

Slots

NameSlot propsDescription
default—Replaces the header text.
content(props: { checked: boolean })Replaces the on/off content beside the switch.

Used in these templates