PU-Select Component

A customizable select dropdown component with custom styling and v-model support

Usage

Basic Usage

PropTypeRequiredDefaultDescription
optionsArray<{value: string | number, label: string}>Yes-Available options in dropdown
modelValuestring | number | nullYes-Selected value (v-model support)
placeholderstringNo'Select'Placeholder text when no option is selected
size'small' | 'large'No-Control padding size
idstringNoundefinedHTML id attribute
exampleOption{value: string | number, label: string}NoundefinedExample option for documentation purposes
EventDescriptionPayload
update:modelValueEmits when selection changesstring | number | null
changeNative select change eventEvent
  • Custom arrow using PUIcon component
  • Focus ring styling:
    .ring-2.ring-primary-light-500 {
      @apply focus:outline-none focus:ring-2 focus:ring-primary-light-500;
    }
    
  • Hover states for options:
    .hover\:bg-primary-light-500:hover {
      @apply bg-primary-light-500 text-white;
    }
    
  • Proper label association using id prop
  • Keyboard navigation support
  • Screen reader friendly markup
  • Visible focus states
  • PUIcon for custom arrow display
  • Tailwind CSS for styling
  • Vue 3 Composition API