Morpheme

Appearance

Switch ​

The VSwitch component allows you to add a toggle switch to your Vue app.

Usage ​

Basic Usage ​

To use the component, you first need to install it with @morpheme/ui. Once installed, the VSwitch component will be registered globally, so you don't need to import it manually.

INFO

The VSwitch component is registered globally when you install with @morpheme/ui. So you don't need to import it manually.

Colors ​

You can specify the color of the VSwitch using the color prop. The available colors are primary, secondary, success, warning, error, and custom.

No Label ​

If you don't want to display a label, you can leave out the label prop.

Custom Class ​

You can apply custom classes to the VSwitch and its individual parts using the switch-class, active-class, inactive-class, and button-class props.

Custom Style ​

You can also style the component using CSS variables.

Validation ​

You can use the VSwitch component with form validation libraries like vee-validate.

Props ​

NameTypeDefault
modelValueBooleanfalse
labelString''
colorString as PropType<Colors>'primary'
inactiveClassString''
activeClassString''
buttonClassString''
wrapperClassString''
switchClassString''
switchGroupClassString''
labelClassString''
nameString''
rulesString''
errorClassString''
hintString''
hideErrorBooleanfalse

Events ​

update:modelValue ​

The update:modelValue event is emitted when the value of the VSwitch changes.

Type:

ts
(event: 'update:modelValue', value: boolean): void
(event: 'update:modelValue', value: boolean): void

Example:

vue
<script setup lang="ts">
import {ref} from 'vue';

const checked = ref(false);

const onChange = (val: boolean) => {
  console.log(val);
};
</script>

<template>
  <VSwitch
    v-model="checked"
    label="Custom Style"
    @update:modelValue="onChange"
  />
</template>
<script setup lang="ts">
import {ref} from 'vue';

const checked = ref(false);

const onChange = (val: boolean) => {
  console.log(val);
};
</script>

<template>
  <VSwitch
    v-model="checked"
    label="Custom Style"
    @update:modelValue="onChange"
  />
</template>

Slots ​

None

CSS Variables ​

scss
:root {
  --v-switch-width: 100%;
  /* button */
  --v-switch-button-bg-color: var(--color-gray-200);
  --v-switch-button-border-color: var(--color-transparent);
  --v-switch-button-checked-bg-color: var(--color-primary-500);
  --v-switch-button-checked-border-color: var(--color-primary-500);
  --v-switch-button-width: 36px;
  --v-switch-button-height: 20px;
  --v-switch-button-padding-y: 0px;
  --v-switch-button-padding-x: 0px;

  /* thumb */
  --v-switch-thumb-bg-color: var(--color-white);
  --v-switch-thumb-width: 16px;
  --v-switch-thumb-height: 16px;
  --v-switch-thumb-border-radius: var(--border-radius-full);
  --v-switch-thumb-translate-x: 2px;

  --v-switch-thumb-active-translate-x: 18px;

  /* label */
  --v-switch-label-color: var(--v-input-label-color);
  --v-switch-label-font-size: var(--v-input-label-font-size);
  --v-switch-label-font-weight: var(--v-input-label-font-weight);

  // hint
  --v-switch-hint-font-size: var(--v-input-hint-font-size, 14px);
  --v-switch-hint-color: var(--v-input-hint-color);
  --v-switch-hint-margin-top: var(--v-input-hint-margin-top);
}
:root {
  --v-switch-width: 100%;
  /* button */
  --v-switch-button-bg-color: var(--color-gray-200);
  --v-switch-button-border-color: var(--color-transparent);
  --v-switch-button-checked-bg-color: var(--color-primary-500);
  --v-switch-button-checked-border-color: var(--color-primary-500);
  --v-switch-button-width: 36px;
  --v-switch-button-height: 20px;
  --v-switch-button-padding-y: 0px;
  --v-switch-button-padding-x: 0px;

  /* thumb */
  --v-switch-thumb-bg-color: var(--color-white);
  --v-switch-thumb-width: 16px;
  --v-switch-thumb-height: 16px;
  --v-switch-thumb-border-radius: var(--border-radius-full);
  --v-switch-thumb-translate-x: 2px;

  --v-switch-thumb-active-translate-x: 18px;

  /* label */
  --v-switch-label-color: var(--v-input-label-color);
  --v-switch-label-font-size: var(--v-input-label-font-size);
  --v-switch-label-font-weight: var(--v-input-label-font-weight);

  // hint
  --v-switch-hint-font-size: var(--v-input-hint-font-size, 14px);
  --v-switch-hint-color: var(--v-input-hint-color);
  --v-switch-hint-margin-top: var(--v-input-hint-margin-top);
}

Standalone Installation ​

You can also install the Switch component individually via @morpheme/switch package:

bash
npm i @morpheme/switch
npm i @morpheme/switch

Then, use it like so:

vue
<script setup lang="ts">
import VSwitch from '@morpheme/switch';
import {ref} from 'vue';

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

<template>
  <VSwitch v-model="checked" />
</template>
<script setup lang="ts">
import VSwitch from '@morpheme/switch';
import {ref} from 'vue';

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

<template>
  <VSwitch v-model="checked" />
</template>

Storybook ​

View Storybook documentation here.