Switch

The Switch component is used as an alternative for the checkbox. The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label.

Examples

Switch

Code

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

const form = ref({
  checked: false
})
</script>

<template>
  <form @submit.prevent="">
    <base-switch v-model="form.checked" />
  </form>
</template>

Text

Code

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

const form = ref({
  checked: false
})
</script>

<template>
  <form @submit.prevent="">
    <base-switch v-model="form.checked" text="Label" />
    <base-switch v-model="form.checked" text="Label" text-position="right" />
  </form>
</template>

Label

Code

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

const form = ref({
  checked1: false,
  checked2: false
})
</script>

<template>
  <form @submit.prevent="">
    <base-switch
      v-model="form.checked1"
      label="Label"
      layout="vertical"
      description="Vertical Layout"
    />
    <base-switch
      v-model="form.checked2"
      label="Label"
      layout="horizontal"
      description="Horizontal Layout"
    />
  </form>
</template>

Size

Code

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

const form = ref({
  checked1: false,
  checked2: false,
  checked3: false,
  checked4: false
})
</script>

<template>
  <form @submit.prevent="">
    <base-switch v-model="form.checked1" label="sm" size="sm" />
    <base-switch v-model="form.checked2" label="md" size="md" />
    <base-switch v-model="form.checked3" label="lg" size="lg" />
    <base-switch v-model="form.checked4" label="xl" size="xl" />
  </form>
</template>

Helper

Code

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

const form = ref({
  checked1: false,
  checked2: false,
  checked3: false,
  checked4: false,
  checked5: false
})

const errors = ref(['Error Example'])
</script>

<template>
  <form @submit.prevent="">
    <base-switch v-model="form.checked1" label="Label" layout="horizontal" required />
    <base-switch
      v-model="form.checked2"
      label="Label"
      layout="horizontal"
      description="Description example"
    />
    <base-switch
      v-model="form.checked3"
      label="Label"
      layout="horizontal"
      :helpers="['Description example']"
    />
    <base-switch
      v-model="form.checked4"
      label="Label"
      layout="horizontal"
      v-model:errors="errors"
    />
    <base-switch
      v-model="form.checked5"
      label="Label"
      layout="horizontal"
      description="Disabled"
      disabled
    />
  </form>
</template>

Disabled

Code

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

const form = ref({
  checked1: true,
  checked2: false
})
</script>

<template>
  <form @submit.prevent="">
    <base-switch v-model="form.checked1" disabled />
    <base-switch v-model="form.checked2" disabled />
  </form>
</template>

Switch API

Types

export type BaseSwitchTextPosition = 'left' | 'right'
export type BaseSwitchSize = 'sm' | 'md' | 'lg' | 'xl'

Props

Name	Type	Default	Description
v-model	boolean		v-model is required.
v-model:errors	string[]		Input error message.
label	string		Switch label.
text	string		Switch text.
text-position	BaseSwitchTextPosition	left	Switch text position.
size	BaseSwitchSize	md	Switch size.
disabled	boolean	false	if true switch is disabled.
data-testid	string		Testing ID.

Automated Test Guide

If you pass a data-testid to the <base-switch> component, it will automatically generate unique data-testid attributes for testing.

Gherkin Scenario

When I toggle switch "enable-notification"

Step Definition

When('I toggle switch {string}', (selector: string) => {
  cy.get(`[data-testid="${selector}"]`).click()
})

Code Implementation

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

const enableNotification = ref(false)
</script>

<template>
  <base-switch v-model="enableNotification" data-testid="enable-notification" />
</template>