Vue Component Library

Appearance

Switch Component Demos ​

Basic Switch ​

A simple switch with a label.

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

<script setup>
import { ref } from 'vue';

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

Switch Sizes ​

Switches in different sizes (xs, sm, md, lg, xl).

vue
<template>
  <div class="switch-size-demo">
    <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';

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

Variant Styles ​

Switches with different variant styles.

vue
<template>
  <div class="variant-demo">
    <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';

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

Label Positions ​

Switches with labels on different positions.

vue
<template>
  <div class="label-position-demo">
    <OSwitch
      v-model="isEnabled"
      label="Right Label (Default)"
      label-position="right"
    />
    <OSwitch v-model="isEnabled" label="Left Label" label-position="left" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

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

Disabled and Readonly States ​

Switches in disabled and readonly states.

vue
<template>
  <div class="state-demo">
    <OSwitch v-model="isEnabled" label="Normal Switch" />
    <OSwitch
      v-model="isEnabled"
      label="Disabled Switch (Unchecked)"
      :disabled="true"
    />
    <OSwitch
      :model-value="true"
      label="Disabled Switch (Checked)"
      :disabled="true"
    />
    <OSwitch
      v-model="isEnabled"
      label="Readonly Switch (Unchecked)"
      :readonly="true"
    />
    <OSwitch
      :model-value="true"
      label="Readonly Switch (Checked)"
      :readonly="true"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

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

Custom Label Slots ​

Switches with custom label content using slots.

vue
<template>
  <div class="custom-label-demo">
    <OSwitch v-model="isEnabled" label-position="left" label="Notifications">
      <template #left-label>
        <div class="custom-label">
          <span class="label-icon">🔔</span>
          <span class="label-text">Notifications</span>
        </div>
      </template>
    </OSwitch>

    <OSwitch v-model="isEnabled" label="Dark Mode">
      <template #right-label>
        <div class="custom-label">
          <span class="label-icon">🌙</span>
          <span class="label-text">Dark Mode</span>
        </div>
      </template>
    </OSwitch>
  </div>
</template>

<script setup>
import { ref } from 'vue';

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

Event Handling ​

Example of handling switch events.

vue
<template>
  <div class="event-demo">
    <OSwitch
      v-model="isEnabled"
      label="Event Handling"
      @change="handleChange"
    />
    <div class="event-log">Last event: {{ lastEvent }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isEnabled = ref(false);
const lastEvent = ref('No events yet');

const handleChange = (newValue) => {
  lastEvent.value = `Switch changed to: ${newValue}`;
};
</script>
Last event: No events yet

Inset Style ​

Switches with inset style.

vue
<template>
  <div class="inset-demo">
    <OSwitch v-model="isEnabled" label="Inset Switch" :inset="true" />
    <OSwitch
      v-model="isEnabled"
      label="Inset Success"
      variant="success"
      :inset="true"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

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

Dot Labels ​

Switches with dot labels displayed inside the switch.

vue
<template>
  <div class="dot-label-demo">
    <OSwitch
      v-model="isEnabled"
      label="Dot Labels"
      :dot-labels="{ true: 'On', false: 'Off' }"
    />
    <OSwitch
      v-model="isEnabled"
      label="Dot Labels (Inset)"
      :dot-labels="{ true: 'On', false: 'Off' }"
      :inset="true"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';

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