Taggable Selector

A multi-select dropdown that displays selected options as tags inside the trigger. Built on top of Selector and Tag.

Live Demo

Basic

Selected: None

With Label

Assignees

Selected: None

Mixed Variants

Labels

Selected: None

Usage

Basic

<script setup>
const selected = ref([]);
const options = [
  { id: 1, text: "Option A", variant: "accent" },
  { id: 2, text: "Option B", variant: "neutral" },
];
</script>

<template>
  <orio-taggable-selector
    v-model="selected"
    :options="options"
    placeholder="Select options"
  />
</template>

With Label

<orio-taggable-selector
  v-model="selected"
  :options="options"
  label="Categories"
  placeholder="Pick categories"
/>

How It Works

TaggableSelector wraps the Selector component with multiple and option-name="text" hardcoded. It overrides the trigger-label slot to render each selected option as an <orio-tag>, using the text and variant fields from each option object.

Options must conform to the TagProps interface:

interface TagProps {
  text: string;
  id?: string;
  variant?: "neutral" | "accent";
}

Props

Inherits all props from Selector except multiple (always true) and optionName (always "text").

Prop	Type	Default	Description
options	TagProps[]	-	Array of tag objects to select from
field	string	'id'	Key field used as unique identifier
placeholder	string	'Select an option'	Placeholder text when nothing is selected
label	string	-	Label text (passed to ControlElement)

Model

Model	Type	Description
modelValue	TagProps[]	Two-way binding for the selected tags array

Styling

Selected tags wrap inside the trigger with flex-wrap:

--color-accent-soft   /* Accent tag background */
--color-accent-border /* Accent tag border */
--color-surface       /* Neutral tag background */
--color-border        /* Neutral tag border */