Switch API Reference

Props

Prop	Type	Default	Description
modelValue	Boolean	-	v-model binding value
value	Boolean	-	Alternative to modelValue
disabled	Boolean	false	Disables the switch
readonly	Boolean	false	Makes the switch read-only
variant	String	'default'	Visual variant class (e.g. 'default', 'success')
size	String	'xl'	Size of the switch. Options: 'xs', 'sm', 'md', 'lg', 'xl'
label	String	''	Label text for the switch
labelPosition	String	'right'	Position of the label. Options: 'left', 'right'
inset	Boolean	false	Inset style for the switch
dotLabels	Object	null	Labels for the switch dots when active and inactive. Format: { true: 'On', false: 'Off' }

Events

Event	Payload	Description
update:modelValue	Boolean	Emitted when switch state changes
change	Boolean	Emitted when switch state changes

Slots

Slot	Description
left-label	Custom content for the left label
right-label	Custom content for the right label

Methods

The component doesn't expose any methods via template refs.

Example Usage

Basic Usage

<template>
  <OSwitch
    v-model="isEnabled"
    label="Enable Feature"
    variant="default"
  />
</template>

<script setup>
import { ref } from "vue";
import { OSwitch } from "your-component-library";

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

With Variants

<template>
  <div class="switch-group">
    <OSwitch
      v-model="isEnabled1"
      label="Default Variant"
      variant="default"
    />
    <OSwitch
      v-model="isEnabled2"
      label="Success Variant"
      variant="success"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { OSwitch } from "your-component-library";

const isEnabled1 = ref(false);
const isEnabled2 = ref(false);
</script>

Different Sizes

<template>
  <div class="switch-group">
    <OSwitch v-model="isEnabled" label="Extra Small" size="xs" />
    <OSwitch v-model="isEnabled" label="Small" size="sm" />
    <OSwitch v-model="isEnabled" label="Medium" size="md" />
    <OSwitch v-model="isEnabled" label="Large" size="lg" />
    <OSwitch v-model="isEnabled" label="Extra Large" size="xl" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { OSwitch } from "your-component-library";

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

With Left Label

<template>
  <OSwitch v-model="isEnabled" label="Notifications" label-position="left" />
</template>

<script setup>
import { ref } from "vue";
import { OSwitch } from "your-component-library";

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