Switcher

The switcher input type is used for boolean toggle switches. It provides a modern, accessible way to enable/disable features, accept terms, or make yes/no decisions with a simple on/off state.

<template>
    <VsInputSwitcher v-model="switcherValue" />
</template>
<script setup>
import { ref } from 'vue'
import { VsInputSwitcher } from '@opengis/form'

const switcherValue = ref(false);
</script>

false

Basic Switcher

<VsInputSwitcher v-model="switcherValue" />

{
  name: 'newsletter',
  type: 'switcher',
  label: 'Subscribe to newsletter'
}

false

Required Switcher

<VsInputSwitcher v-model="switcherValue" />

{
  name: 'terms',
  type: 'switcher',
  label: 'I agree to the terms and conditions',
  rules: ['required']
}

false

Properties

Required Properties

• name (string): Unique identifier for the field
• type (string): Must be 'switcher'
• label (string): Display label for the field

Optional Properties

• disabled (boolean): Whether the field is disabled
• rules (array): Validation rules
• conditions (object): Conditional display logic

Schema Interface

interface SwitcherSchemaItem {
  name: string;
  type: 'switcher';
  label: string;
  disabled?: boolean;
  rules?: (string | object)[];
  conditions?: Conditions | Conditions[];
}

Best Practices

1. Use clear, action-oriented labels that describe what the switch does
2. Use positive language (e.g., "Enable notifications" vs "Disable notifications")
3. Provide immediate feedback when the switch state changes
4. Use consistent styling across your application
5. Consider accessibility with proper ARIA labels
6. Use for binary choices only (on/off, yes/no, enable/disable)
7. Avoid using for multiple options - use radio buttons or select instead
8. Provide clear visual feedback for the current state
9. Use appropriate sizing for touch interfaces
10. Test with keyboard navigation for accessibility compliance