Usage

Switch toggles a single boolean state.

<script setup lang="ts">
import { Switch } from '@astryx-vue/core/Switch'
import { shallowRef } from 'vue'

const enabled = shallowRef(false)
</script>

<template>
  <Switch v-model="enabled" label="Notifications" />
</template>

Best practices

Guidance	Practices
Do	Use for settings that apply immediately; the toggle should take effect without a separate save action.
Do	Pair with a clear, concise label that describes the setting being controlled.
Don't	Use for options that require a form submission to take effect; use a checkbox instead.
Don't	Wrap a disabled switch in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead.

Examples

Basic

Notifications

Receive email updates.

Bind a boolean value with v-model. The label and description are automatically associated through Field.

Sizes

Small

Medium

Large

Switch comes in sm, md, and lg sizes.

Disabled and read-only

Disabled

Read-only

Locked

You need the Admin role to change this.

When disabledMessage is provided, the disabled switch remains focusable so the reason can be read.

Keyboard interactions

Switch is built on a native checkbox, so its keyboard behaviour follows the browser's defaults and every action is reachable without a mouse. With focus on the switch, these keys apply:

• Tab moves focus to the switch.
• Space toggles the checked state.
• Escape closes the disabled-reason tooltip.

The disabled-reason tooltip only appears when the switch is disabled and a disabledMessage is provided, so Escape has an effect only in that case.

Usage notes

Use a switch for a two-state option that takes effect right away, such as turning notifications on or off. If an option only applies once the form is submitted, use a checkbox instead; otherwise users may assume the switch has already saved the change.

isRequired only shows the required indicator and sets aria-required; it does not perform validation or block form submission.