PXD

Toggle

Switch between two values

Default

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

const isChecked = ref(false)
</script>

<template>
  <PToggle v-model="isChecked" />
</template>

Sizes

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

const isChecked = ref(false)
</script>

<template>
  <PStack align="center">
    <PToggle v-model="isChecked" size="sm" />
    <PToggle v-model="isChecked" />
    <PToggle v-model="isChecked" size="lg" />
  </PStack>
</template>

Loading/Disabled

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

const isChecked1 = ref(false)
const isChecked2 = ref(true)
</script>

<template>
  <PStack direction="vertical">
    <PToggle v-model="isChecked1" loading />
    <PToggle v-model="isChecked2" loading />
    <PToggle v-model="isChecked1" disabled />
    <PToggle v-model="isChecked2" disabled />
  </PStack>
</template>

Async

Set an asynchronous or synchronous function to decide whether to allow this modification.

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

const isChecked = ref(false)
const isLoading = ref(false)

function onBeforeChange(v) {
  return new Promise((resolve) => {
    isLoading.value = true
    setTimeout(() => {
      resolve(true)
    }, 500)
  }).finally(() => {
    isLoading.value = false
  })
}
</script>

<template>
  <PToggle v-model="isChecked" :loading="isLoading" :before-change="onBeforeChange" />
</template>

Custom Color

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

const isChecked = ref(false)
</script>

<template>
  <PToggle
    v-model="isChecked"
    active-color="var(--color-green-700)"
    inactive-color="var(--color-red-700)"
  />
</template>

Icons

<script setup>
import { ref } from 'vue'
import LockOpenIcon from '@gdsicon/vue/lock-open'
import LockClosedIcon from '@gdsicon/vue/lock-closed'

const isChecked1 = ref(false)
const isChecked2 = ref(true)
</script>

<template>
  <PStack>
    <PToggle v-model="isChecked1">
      <template #checked>
        <LockClosedIcon />
      </template>

      <template #unchecked>
        <LockOpenIcon />
      </template>
    </PToggle>

    <PToggle v-model="isChecked2">
      <template #checked>
        <LockClosedIcon />
      </template>

      <template #unchecked>
        <LockOpenIcon />
      </template>
    </PToggle>
  </PStack>
</template>

With Label

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

const isChecked = ref(false)
</script>

<template>
  <PToggle v-model="isChecked" inactive-label="Uncheck" active-label="Checked" />
</template>

Custom checked value

You can customize the selected and unselected values.

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

const customValue = ref(false)
</script>

<template>
  <PToggle
    v-model="customValue"
    inactive-label="Closed"
    active-label="Opened"
    inactive-value="closed"
    active-value="opened"
  />
</template>

Props

NameTypeDefaultDescription
size'sm' | 'md' | 'lg'-Track size of the switch, falls back to the config provider size
loadingboolean-Show a spinner in the handle and ignore user input
disabledboolean-Disable the switch and dim the handle
model-valueboolean | number | string | undefined-Current value, checked against active-value
active-valueboolean | number | string | undefinedtrueValue emitted when the switch is turned on
inactive-valueboolean | number | string | undefinedfalseValue emitted when the switch is turned off
before-changeComponentBeforeChange<ValueType>-Sync or async guard, a falsy result rejects the change
active-colorstring-Track color when checked, accepts any CSS color
inactive-colorstring-Track color when unchecked, accepts any CSS color
active-labelstring-Text shown beside the switch when it is on
inactive-labelstring-Text shown beside the switch when it is off

Events

NameTypeDescription
change(value: boolean | number | string) => voidEmitted when the switch is toggled and the before-change guard allows it.
update:modelValue(value: boolean | number | string) => voidEmitted when the active or inactive value is written to the model.

Source

Source