Components / Forms

Switch

A labelled on/off control built on a native checkbox.

Preview

Install

Run in your project

npx @getweini/cli@latest add switch

Use cases

Immediate preference

Turn account notifications on or off as a persistent setting.

Feature availability

Disable a preference that the current plan does not allow.

Usage example

Vue

<script setup lang="ts">
import { ref } from 'vue'
import Switch from './components/ui/switch/Switch.vue'
import Label from './components/ui/label/Label.vue'
const alerts = ref(true)
</script>

<template>
  <Switch id="alerts" v-model="alerts" />
  <Label for="alerts">Notifications</Label>
</template>

More examples

Email alerts

A stable label describes the setting in both states.

Email alerts

<script setup lang="ts">
import { ref } from 'vue'
import Switch from './components/ui/switch/Switch.vue'
import Label from './components/ui/label/Label.vue'
const alerts = ref(true)
</script>
<template>
  <Switch id="alerts" v-model="alerts" name="alerts" value="enabled" />
  <Label for="alerts">Email alerts</Label>
</template>

Unavailable setting

Disable both control and related explanatory presentation.

Unavailable setting

<script setup lang="ts">
import { ref } from 'vue'
import Switch from './components/ui/switch/Switch.vue'
import Label from './components/ui/label/Label.vue'
const audit = ref(false)
</script>
<template>
  <Switch id="audit" v-model="audit" disabled aria-describedby="audit-help" />
  <Label for="audit" disabled>Audit log</Label>
  <p id="audit-help">Available on the Team plan.</p>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Switch
Name	Type	Default or requirement
`v-model`	boolean	required
`size`	sm \| md \| lg	md
`invalid`	boolean	false

Space and label activation work natively. Checked switches submit their value; unchecked switches submit nothing.

Implementation notes

A checked named switch submits its value; an unchecked switch submits nothing.
Use a switch for an on/off setting, especially one that takes effect immediately.

Accessibility and localization

Keep label wording stable when state changes. The native checkbox supplies Space and focus behavior with switch semantics.