Toggle

Switch between two values

Default

code

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

  const isChecked = ref(false)
</script>

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

Sizes

code

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

  const isChecked = ref(false)
</script>

<template>
  <PStack gap="8">
    <PToggle v-model="isChecked" size="sm" />
    <PToggle v-model="isChecked" />
    <PToggle v-model="isChecked" size="lg" />
  </PStack>
</template>

Custom Color

code

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

  const isChecked = ref(false)
</script>

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

With Label

Uncheck

Checked

code

<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.

Closed

Opened

code

<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>