Toggle

Base input toggle.

Usage

Simple Usage

onoff

Textpreview

<template>
  <p-toggle>Text</p-toggle>
</template>

With Icon

Text preview

<template>
  <p-toggle>
    <template #checked>
      <svg width="8" height="8" viewBox="0 0 2 8" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="2" height="8" rx="1" fill="white" /></svg>
    </template>
    <template #unchecked>
      <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="4" r="3" stroke="white" stroke-width="2"/></svg>
    </template>
    <template #default>
      Text
    </template>
  </p-toggle>
</template>

Type variant

There available 2 type variants: pill and flat. default is pill

onoff

Pill

onoff

Flatpreview

<template>
  <p-toggle variant="pill">Pill</p-toggle>
  <p-toggle variant="flat">Flat</p-toggle>
</template>

Custom label

You can customize toggle label with checked-label and unchecked-label

YN

Text

PMAM

Textpreview

<template>
  <p-toggle variant="pill" checked-label="Y" unchecked-label="N">Text</p-toggle>
  <p-toggle variant="flat" checked-label="PM" unchecked-label="AM">Text</p-toggle>
</template>

You can also use checked and unchecked slot to customize the label, it allow you to use non-text label like an icon

Dark Mode preview

<template>
  <p-toggle>
    <template #checked>
      <IconDark />
    </template>
    <template #unchecked>
      <IconLight />
    </template>
    <template #default>
      Dark Mode
    </template>
  </p-toggle>
</template>

<script setup>
  import IconLight from '@privyid/persona-icon/vue/sun/16.vue'
  import IconDark from '@privyid/persona-icon/vue/moon/16.vue'
</script>

Hide label

You can hide toggle label with no-label prop

Text

Textpreview

<template>
  <p-toggle variant="pill" no-label>Text</p-toggle>
  <p-toggle variant="flat" no-label>Text</p-toggle>
</template>

Disabled state

onoff

Pill

onoff

Flatpreview

<template>
  <p-toggle variant="pill" disabled>Pill</p-toggle>
  <p-toggle variant="flat" disabled>Flat</p-toggle>
</template>

Readonly state

onoff

Readonly False

onoff

Readonly Truepreview

<template>
  <p-toggle readonly>Readonly False</p-toggle>
  <p-toggle readonly checked>Readonly True</p-toggle>
</template>

Binding v-model

onoff

Textpreview

Result :

false

<template>
  <p-toggle v-model="modelA">Text</p-toggle>
</template>

Custom v-model value

By default, value of toggle is always Boolean, but you can change it with value and unchecked-value.

onoff

Lamppreview

Result :

off

<template>
  <p-toggle
    v-model="model"
    value="on"
    unchecked-value="off">
    Active
  </p-toggle>
</template>

Array v-model

Similar to Checkbox, if v-model state is an array it will append the value instead of replacing it.

onoff

Apple

onoff

Grape

onoff

Pineapple

preview

Selected :

[]

<template>
  <div class="flex flex-col space-y-3">
    <p-toggle v-model="selected" value="apple">Apple</p-toggle>
    <p-toggle v-model="selected" value="grape">Grape</p-toggle>
    <p-toggle v-model="selected" value="pineapple">Pineapple</p-toggle>
  </div>
</template>

API

Props

Props	Type	Default	Description
variant	String	pill	Toggle style variant, valid value is pill, flat
checked	Boolean	false	Checked condition. if it is true, Toggle will be checked on first time
value	Any	true	Checked value
uncheckedValue	Any	false	Unchecked value
checkedLabel	String	on	Label when Toggle is checked
uncheckedLabel	String	off	Label when Toggle is unchecked
noLabel	Boolean	false	Hide label
disabled	Boolean	false	Disabled state
readonly	Boolean	false	Readonly state
modelValue	Any	-	v-model value
switchClass	String or Array or Object	-	CSS class to add in the toggle switch

Slots

Name	Description
default	Content to place in toggle
checked	Content for checked label
unchecked	Content for unchecked label

Events

Name	Arguments	Description
change	Boolean	Event when value changed

See Also

• Checkbox
• Radio