Switch

Toggle between two states.

Switch

Options

Disabled

Size

Basic Usage

Toggle between two states.

<template>
  <bp-space>
    <bp-switch v-model="val"></bp-switch>
    <bp-switch v-model="val" disabled></bp-switch>
  </bp-space>
</template>

<script setup lang="ts">
import { ref } from "vue";
const val = ref(true);
</script>

Size

Supports small - small and mini - mini.

<template>
  <bp-space>
    <bp-switch v-for="size in sizes" :size v-model="val"></bp-switch>
  </bp-space>
</template>

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

const sizes = ["small", "mini"];
const val = ref(true);
</script>

Custom Text

Customize labels with check-text and uncheck-text.

Close

<template>
  <bp-switch v-model="val" check-text="On" uncheck-text="Close"></bp-switch>
</template>

<script setup lang="ts">
import { ref } from "vue";
const val = ref(false);
</script>

Async Operation

Gate toggles with on-before-ok.

<template>
  <bp-switch v-model="val" :on-before-ok="onBeforeOk"></bp-switch>
</template>

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

const val = ref(false);

const onBeforeOk = async () => {
  await new Promise((resolve) => setTimeout(resolve, 2000));
  return true;
};
</script>

Switch Props

v-model	Bound value	SwitchValue	-	-
id	Input id	String	-	-
disabled	Whether disabled	Boolean	-	-
size	Size	SwitchSize	small	-
check-value	Value when checked	SwitchValue	true	-
uncheck-value	Value when checked	SwitchValue	false	-
check-text	Text when checked	String	-	-
uncheck-text	Text when checked	String	-	-
on-before-ok	Callback before toggle; return boolean to control the switch	()=>void | boolean | Promise<void | boolean>	-	-