Selector

Generic dropdown selector supporting both single and multi-select modes with custom option rendering.

Live Demo

Single Select (Strings)

Select a country

Selected: None

Multiple Select

0 selected

Selected: None

Object Array with Custom Fields

Select a user

Selected User: None

Usage

Simple String Array

<template>
  <orio-selector
    v-model="selected"
    :options="['Option 1', 'Option 2', 'Option 3']"
    placeholder="Select an option"
  />
</template>

<script setup>
const selected = ref(null)
</script>

Object Array

<template>
  <orio-selector
    v-model="selectedUser"
    :options="users"
    field="id"
    option-name="name"
  />
</template>

<script setup>
const selectedUser = ref(null)
const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' }
]
</script>

Multiple Selection

<orio-selector
  v-model="selected"
  :options="options"
  :multiple="true"
/>

Custom Option Rendering

<orio-selector v-model="selected" :options="users">
  <template #option="{ option }">
    <div style="display: flex; justify-content: space-between;">
      <strong>{{ option.name }}</strong>
      <span style="color: gray;">{{ option.role }}</span>
    </div>
  </template>
</orio-selector>

Props

Prop	Type	Default	Description
options	Array<string | object>	-	Array of options to select from
multiple	boolean	false	Enable multi-select mode
field	string	'id'	Key field for object options (used as unique identifier)
optionName	string	undefined	Field to display for object options
placeholder	string	'Select an option'	Placeholder text

Events

Event	Payload	Description
update:modelValue	any | any[]	Emitted when selection changes

Slots

Slot	Props	Description
trigger	{ toggle }	Custom trigger element
trigger-content	{ toggle, getOptionKey, getOptionLabel }	Custom trigger content
trigger-label	{ toggle, getOptionKey, getOptionLabel }	Custom trigger label text
option	{ option, toggle, selected, getOptionKey, getOptionLabel }	Custom option rendering
no-options	-	Custom empty state when no options
options-addon	-	Additional content at bottom of dropdown

TypeScript

The Selector component supports TypeScript generics:

interface User {
  id: number
  name: string
  role: string
}

const selectedUser = ref<User | null>(null)

Styling

--color-bg           /* Dropdown background */
--color-border       /* Border color */
--color-text         /* Text color */
--color-accent       /* Selected item background */
--color-surface      /* Hover background */