Skip to content
On this page

Toggle

Base input toggle.

Usage

Simple Usage

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

With Icon

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

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

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

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

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

Disabled state

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

Readonly state

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

Binding v-model

preview

Result :

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

preview

Result :

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

preview

Selected :

[]
vue
<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

PropsTypeDefaultDescription
variantStringpillToggle style variant, valid value is pill, flat
checkedBooleanfalseChecked condition. if it is true, Toggle will be checked on first time
valueAnytrueChecked value
uncheckedValueAnyfalseUnchecked value
checkedLabelStringonLabel when Toggle is checked
uncheckedLabelStringoffLabel when Toggle is unchecked
noLabelBooleanfalseHide label
disabledBooleanfalseDisabled state
readonlyBooleanfalseReadonly state
modelValueAny-v-model value

Slots

NameDescription
defaultContent to place in toggle
checkedContent for checked label
uncheckedContent for unchecked label

Events

NameArgumentsDescription
changeBooleanEvent when value changed

See Also

Released under the MIT License.