ACV Switch

Switch is a component used to toggle between two states, such as on and off. It is a visual representation of a checkbox that allows the user to switch between two states.

• It used for actions that occur immediately after the user switches the toggle switch to one of the positions.
• Switch has two basic states - On / Off.
• Like checkboxes, a switch also has several states: focused, disabled, hover and active.

Figma mockups

https://www.figma.com/design/6nFlVmwDwvGloglQHxyElh/Tokens-test?node-id=592-168382

Basic usage

Bind v-model to a Boolean typed variable.

On On and disabled On Off and disabled

Source code

<script setup>
  import { ref } from 'vue';
  import AcvSwitch from '@/components/switch/switch.vue';

  const values = ref([true, true, false, false]);
</script>

<template>
  <AcvSwitch v-model="values[0]">
    On
  </AcvSwitch>
  <AcvSwitch
    v-model="values[1]"
    disabled
  >
    On and disabled
  </AcvSwitch>
  <AcvSwitch v-model="values[2]">
    On
  </AcvSwitch>
  <AcvSwitch
    v-model="values[3]"
    disabled
  >
    Off and disabled
  </AcvSwitch>
</template>

Label

You can add a label to the switch component using the label prop.

Email notificationsPush notificationsMobile notifications

TIP

You can also use default slot to render the label.

Array

You can use an array to bind multiple switches to a single variable.

accountActivitycommentlikementionfollow

Enabled Notifications: []

Source code

<script setup>
  import { ref } from 'vue';
  import AcvSwitch from '@/components/switch/switch.vue';

  const enabledNotifications = ref([]);
</script>

<template>
  <div class="grid-row place-items-stretch">
    <AcvSwitch
      v-model="enabledNotifications"
      value="accountActivity"
      label="accountActivity"
    />
    <AcvSwitch
      v-model="enabledNotifications"
      value="comment"
      label="comment"
    />
    <AcvSwitch
      v-model="enabledNotifications"
      value="like"
      label="like"
    />
    <AcvSwitch
      v-model="enabledNotifications"
      value="mention"
      label="mention"
    />
    <AcvSwitch
      v-model="enabledNotifications"
      value="follow"
      label="follow"
    />

    <p>Enabled Notifications: {{ enabledNotifications }}</p>
  </div>
</template>

Sizes

You can switch between different sizes using the size prop.

See also

• Checkbox
• Radio
• Open UI Switch
• WAI-ARIA Switch pattern

Props

Prop name	Description	Type	Values	Default
modelValue	Binding value of the Switch	boolean	-
color	Custom color of the Switch	ColorProp	-	primary
label	Switch description	string	-
size	Switch size	ComponentSize	-	large
disabled	Whether the Switch is disabled	boolean	-

Events

Event name	Properties	Description
update:modelValue	eventName string - The name of the event value string - Checked state of the Switch	Triggered when the modelValue is updated

Slots

Name	Description	Bindings
default	The default slot content