Switch

A toggle switch component for switching between two states.

?

Name	Category	Description	Type	Default
type	? Style	Preset theme color type	'primary' | 'success' | 'warning' | 'danger' | 'info'	—
size	? Size	Size	'large' | 'default' | 'small'	'default'
active-color	? Color	Custom hex color when active	string	—
inactive-color	? Color	Custom hex color when inactive	string	—
disabled	? State	Whether disabled	boolean	false
name	? Behavior	Native name attribute	string	—
model-value / v-model	? Content	Binding value	boolean	false
active-text	? Content	Text when active	string	—
inactive-text	? Content	Text when inactive	string	—
active-value	? Content	Value when active	boolean | string | number	true
inactive-value	? Content	Value when inactive	boolean | string | number	false
active-icon	? Content	Icon name displayed in thumb when active	string	—
inactive-icon	? Content	Icon name displayed in thumb when inactive	string	—
change	? Event	Triggered when state changes	(value: boolean) => void	—
ref	? Expose	Switch HTML element	Ref<HTMLInputElement>	—

Basic Usage

Bind v-model to a Boolean type variable.

<template>
  <div class="demo-switch">
    <px-switch v-model="value1" />
    <px-switch v-model="value2" active-text="开" inactive-text="关" />
  </div>
</template>

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

const value1 = ref(false);
const value2 = ref(true);
</script>

<style scoped>
.demo-switch {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

Type

Use type property to apply preset theme colors.

<template>
  <div class="demo-switch">
    <px-switch v-model="v1" type="primary" />
    <px-switch v-model="v2" type="success" />
    <px-switch v-model="v3" type="warning" />
    <px-switch v-model="v4" type="danger" />
    <px-switch v-model="v5" type="info" />
  </div>
</template>

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

const v1 = ref(true);
const v2 = ref(true);
const v3 = ref(true);
const v4 = ref(true);
const v5 = ref(true);
</script>

<style scoped>
.demo-switch {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

Custom Color

Use active-color and inactive-color properties to set custom hex colors for on/off states.

<template>
  <div class="demo-switch">
    <px-switch v-model="v1" active-color="#8b5cf6" inactive-color="#d4d4d8" />
    <px-switch v-model="v2" active-color="#f97316" />
    <px-switch v-model="v3" active-color="#ec4899" inactive-color="#6b7280" />
  </div>
</template>

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

const v1 = ref(true);
const v2 = ref(false);
const v3 = ref(true);
</script>

<style scoped>
.demo-switch {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

Different Sizes

Use size property to set the switch size.

<template>
  <div class="demo-switch">
    <px-switch v-model="value1" size="large" />
    <px-switch v-model="value2" />
    <px-switch v-model="value3" size="small" />
  </div>
</template>

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

const value1 = ref(true);
const value2 = ref(true);
const value3 = ref(true);
</script>

<style scoped>
.demo-switch {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

Icon

Use active-icon and inactive-icon properties to display an icon inside the switch thumb.

<template>
  <div class="demo-switch">
    <px-switch v-model="v1" active-icon="check" inactive-icon="close" />
    <px-switch v-model="v2" active-icon="sun" inactive-icon="moon" type="warning" />
  </div>
</template>

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

const v1 = ref(true);
const v2 = ref(false);
</script>

<style scoped>
.demo-switch {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

Disabled State

Use disabled property to disable the switch.

<template>
  <div class="demo-switch">
    <px-switch v-model="value" disabled />
    <px-switch v-model="value2" disabled />
  </div>
</template>

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

const value = ref(false);
const value2 = ref(true);
</script>

<style scoped>
.demo-switch {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>