PU-Select Component
A customizable select dropdown component with custom styling and v-model support
Usage
Basic Usage
Prop | Type | Required | Default | Description |
---|---|---|---|---|
options | Array<{value: string | number, label: string}> | Yes | - | Available options in dropdown |
modelValue | string | number | null | Yes | - | Selected value (v-model support) |
placeholder | string | No | 'Select' | Placeholder text when no option is selected |
size | 'small' | 'large' | No | - | Control padding size |
id | string | No | undefined | HTML id attribute |
exampleOption | {value: string | number, label: string} | No | undefined | Example option for documentation purposes |
Event | Description | Payload |
---|---|---|
update:modelValue | Emits when selection changes | string | number | null |
change | Native select change event | Event |
- 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