Usage
Use the v-model directive to control the checked state of the Switch.
<script setup lang="ts">
const value = ref(true)
</script>
<template>
<PSwitch v-model="value" />
</template>
Use the default-value prop to set the initial value when you do not need to control its state.
<template>
<PSwitch default-value />
</template>
Label
Use the label prop to set the label of the Switch.
<template>
<PSwitch label="Check me" />
</template>
When using the required prop, an asterisk is added next to the label.
<template>
<PSwitch required label="Check me" />
</template>
Description
Use the description prop to set the description of the Switch.
This is a checkbox.
<template>
<PSwitch label="Check me" description="This is a checkbox." />
</template>
Icon
Use the checked-icon and unchecked-icon props to set the icons of the Switch when checked and unchecked.
<template>
<PSwitch
unchecked-icon="i-lucide:x"
checked-icon="i-lucide:check"
default-value
label="Check me"
/>
</template>
Loading
Use the loading prop to show a loading icon on the Switch.
<template>
<PSwitch loading default-value label="Check me" />
</template>
Loading Icon
Use the loading-icon prop to customize the loading icon. Defaults to i-lucide:loader-circle.
<template>
<PSwitch loading loading-icon="i-lucide:loader" default-value label="Check me" />
</template>
Color
Use the color prop to change the color of the Switch.
<template>
<PSwitch color="neutral" default-value label="Check me" />
</template>
Size
Use the size prop to change the size of the Switch.
<template>
<PSwitch size="xl" default-value label="Check me" />
</template>
Disabled
Use the disabled prop to disable the Switch.
<template>
<PSwitch disabled label="Check me" />
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
size | 'md' | "md" | "xs" | "sm" | "lg" | "xl" |
color | 'primary' | "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral" |
description | string | |
value | stringThe value given as data when submitted with a | |
name | stringThe name of the field. Submitted with its owning form as part of a name/value pair. | |
id | string | |
autofocus | false | true | "true" | "false" | |
loadingIcon | appConfig.pohon.icons.loading | string | objectThe icon when the |
checkedIcon | string | objectDisplay an icon when the switch is checked. | |
uncheckedIcon | string | objectDisplay an icon when the switch is unchecked. | |
label | string | |
defaultValue | booleanThe state of the switch when it is initially rendered. Use when you do not need to control its state. | |
disabled | booleanWhen | |
modelValue | undefined | boolean |
required | booleanWhen | |
loading | booleanWhen | |
pohon | { root?: ClassValue; base?: ClassValue; container?: ClassValue; thumb?: ClassValue; icon?: ClassValue; wrapper?: ClassValue; label?: ClassValue; description?: ClassValue; } |
Slots
| Slot | Type |
|---|---|
label | { label?: string; } |
description | { description?: string; } |
Emits
| Event | Type |
|---|---|
update:modelValue | [value: boolean] |
change | [event: Event] |
Theme
Below is the theme configuration skeleton for the PSwitch. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
switch: {
slots: {
root: '',
base: '',
container: '',
thumb: '',
icon: '',
wrapper: '',
label: '',
description: ''
},
variants: {
color: {
primary: {
base: '',
icon: ''
},
secondary: {
base: '',
icon: ''
},
success: {
base: '',
icon: ''
},
info: {
base: '',
icon: ''
},
warning: {
base: '',
icon: ''
},
error: {
base: '',
icon: ''
},
neutral: {
base: '',
icon: ''
}
},
size: {
xs: {
base: '',
container: '',
thumb: '',
wrapper: ''
},
sm: {
base: '',
container: '',
thumb: '',
wrapper: ''
},
md: {
base: '',
container: '',
thumb: '',
wrapper: ''
},
lg: {
base: '',
container: '',
thumb: '',
wrapper: ''
},
xl: {
base: '',
container: '',
thumb: '',
wrapper: ''
}
},
checked: {
true: {
icon: ''
}
},
unchecked: {
true: {
icon: ''
}
},
loading: {
true: {
icon: ''
}
},
required: {
true: {
label: ''
}
},
disabled: {
true: {
root: '',
base: '',
label: '',
description: ''
}
}
},
defaultVariants: {
color: 'primary',
size: 'md'
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
switch: {
slots: {
root: '',
base: '',
container: '',
thumb: '',
icon: '',
wrapper: '',
label: '',
description: ''
},
variants: {
color: {
primary: {
base: '',
icon: ''
},
secondary: {
base: '',
icon: ''
},
success: {
base: '',
icon: ''
},
info: {
base: '',
icon: ''
},
warning: {
base: '',
icon: ''
},
error: {
base: '',
icon: ''
},
neutral: {
base: '',
icon: ''
}
},
size: {
xs: {
base: '',
container: '',
thumb: '',
wrapper: ''
},
sm: {
base: '',
container: '',
thumb: '',
wrapper: ''
},
md: {
base: '',
container: '',
thumb: '',
wrapper: ''
},
lg: {
base: '',
container: '',
thumb: '',
wrapper: ''
},
xl: {
base: '',
container: '',
thumb: '',
wrapper: ''
}
},
checked: {
true: {
icon: ''
}
},
unchecked: {
true: {
icon: ''
}
},
loading: {
true: {
icon: ''
}
},
required: {
true: {
label: ''
}
},
disabled: {
true: {
root: '',
base: '',
label: '',
description: ''
}
}
},
defaultVariants: {
color: 'primary',
size: 'md'
}
}
}
};
Akar
With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.
If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.