Paper Ui

v2.0

PUSwitch Component

A customizable switch (toggle) component with multiple variants, disabled states, and different widths.

Usage

Basic Usage

Toggle me

Mid Variant

Mid style

Disabled State

Disabled

Different Widths

Props

Prop	Type	Required	Default	Description
modelValue	boolean	Yes	-	The current state of the switch (on/off)
disabled	boolean	No	false	Disables interaction with the switch
label	string	No	''	Text label displayed next to the switch
flavor	normal \| outlined	No	normal	Defines the styling variant of the switch
width	full \| mid	No	full	Defines the width of the switch

Flavor Variants

Variant	Classes	Description
normal	`pu-switch--normal`	Standard filled switch (Default)
outlined	`pu-switch--outlined`	Switch with a border and transparent inactive state

Styling

Uses font-patrick font family class

Utility-first CSS applied for flexible styling:

.pu-switch {
  @apply rounded-full transition-colors duration-300;
}
.pu-switch-thumb {
  @apply absolute bg-white rounded-full shadow-sm transform transition-transform;
}

Hover effects apply when not disabled
Borders and backgrounds adjust dynamically based on the active state
Fully customizable through CSS classes

Dependencies

Built with Tailwind CSS utility classes
Fully compatible with Vue's v-model