Prop	Type	Required	Default	Description
modelValue	boolean	Yes	-	Current state (v-model support)
disabled	boolean	No	false	Disables interaction
label	string	No	''	Checkbox label text
flavor	normal \| outlined	No	normal	Visual style variant
strikeOnFalse	boolean	No	false	Adds strikethrough to label when unchecked

Events

Event	Description	Payload
update:modelValue	Emits when state changes	boolean
checked	Emits when checked	-
unchecked	Emits when state unchecked	-

Styling

Base styling with Tailwind:

.pu-checkbox {
  @apply flex items-center justify-center w-5 h-5 
        border-2 border-primary-light-500 rounded 
        transition-all;
}

Interactive states:

.active\:animate-bounce:active {
  animation: bounce 0.3s ease-in-out;
}

@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

Accessibility Features

Clickable label area
Visual feedback on interaction
Clear disabled state styling
Keyboard focusable

Dependencies

PUIcon component for checkmark display
Tailwind CSS for styling
Vue 3 Composition API