Select

Select components for single and multiple value selection. Choose between Single Select, Multi Select, or Tag Select variants.

import { CoarSelect, CoarMultiSelect, CoarTagSelect } from '@cocoar/vue-ui';
import type { CoarSelectOption } from '@cocoar/vue-ui';

Single Select

Select a single option from a dropdown list.

Favorite fruit

Choose a fruit...

Selected: none

vue

<template>
  <div style="max-width: 320px;">
    <CoarFormField label="Favorite fruit">
      <CoarSelect
        v-model="value"
        :options="options"
        placeholder="Choose a fruit..."
      />
    </CoarFormField>
    <p style="margin-top: 8px; font-size: 13px; color: #64748b;">
      Selected: {{ value || 'none' }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CoarSelect, CoarFormField } from '@cocoar/vue-ui';
import type { CoarSelectOption } from '@cocoar/vue-ui';

const options: CoarSelectOption<string>[] = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
  { value: 'date', label: 'Date' },
  { value: 'elderberry', label: 'Elderberry' },
  { value: 'fig', label: 'Fig' },
];

const value = ref<string | null>(null);
</script>

States

Disabled, required, and error states.

Required *

Required field

With Error

Error state

Please select an option

Disabled

Disabled

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 320px;">
    <CoarFormField label="Required" required>
      <CoarSelect :options="options" placeholder="Required field" :required="true" />
    </CoarFormField>
    <CoarFormField label="With Error" error="Please select an option">
      <CoarSelect :options="options" placeholder="Error state" />
    </CoarFormField>
    <CoarFormField label="Disabled">
      <CoarSelect :options="options" placeholder="Disabled" :disabled="true" />
    </CoarFormField>
  </div>
</template>

<script setup lang="ts">
import { CoarSelect, CoarFormField } from '@cocoar/vue-ui';
import type { CoarSelectOption } from '@cocoar/vue-ui';

const options: CoarSelectOption<string>[] = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
];
</script>

Multi Select & Tag Select

Select multiple values from a dropdown. Multi Select shows checkmarks, Tag Select shows removable tags inline.

Favorite fruits

Choose multiple...

Selected: none

Countries

Selected: none

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 24px; max-width: 320px;">
    <div>
      <CoarFormField label="Favorite fruits">
        <CoarMultiSelect
          v-model="multiValue"
          :options="fruitOptions"
          placeholder="Choose multiple..."
        />
      </CoarFormField>
      <p style="margin-top: 8px; font-size: 13px; color: #64748b;">
        Selected: {{ multiValue.join(', ') || 'none' }}
      </p>
    </div>
    <div>
      <CoarFormField label="Countries">
        <CoarTagSelect
          v-model="tagValue"
          :options="countryOptions"
          placeholder="Add countries..."
        />
      </CoarFormField>
      <p style="margin-top: 8px; font-size: 13px; color: #64748b;">
        Selected: {{ tagValue.join(', ') || 'none' }}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CoarMultiSelect, CoarTagSelect, CoarFormField } from '@cocoar/vue-ui';
import type { CoarSelectOption } from '@cocoar/vue-ui';

const fruitOptions: CoarSelectOption<string>[] = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
  { value: 'date', label: 'Date' },
  { value: 'elderberry', label: 'Elderberry' },
  { value: 'fig', label: 'Fig' },
];

const countryOptions: CoarSelectOption<string>[] = [
  { value: 'us', label: 'United States' },
  { value: 'de', label: 'Germany' },
  { value: 'fr', label: 'France' },
  { value: 'jp', label: 'Japan' },
  { value: 'br', label: 'Brazil' },
  { value: 'au', label: 'Australia' },
];

const multiValue = ref<string[]>([]);
const tagValue = ref<string[]>([]);
</script>

Options Format

Options must follow the CoarSelectOption<T> interface:

interface CoarSelectOption<T> {
  value: T;
  label: string;
  disabled?: boolean;
  group?: string;
  icon?: string;
}

const options: CoarSelectOption<string>[] = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana', disabled: true },
];

API

Props

Prop	Type	Default	Description
v-model	T | null	null	Selected value (the option's value field)
options	CoarSelectOption<T>[]	[]	Array of { value, label } option objects
placeholder	string	''	Placeholder when empty
size	'xs' | 's' | 'm' | 'l'	'm'	Input size
disabled	boolean	false	Disable the select
required	boolean	false	Mark as required
error	boolean	false	Error state (auto-injected from CoarFormField)

i18n Keys

These keys can be translated via @cocoar/vue-localization.

These keys apply to CoarSelect, CoarMultiSelect, and CoarTagSelect.

Key	Default (English)	Used as
coar.ui.select.clearSelection	'Clear selection'	Clear button aria-label
coar.ui.select.options	'Options'	Options listbox aria-label
coar.ui.select.noResults	'No results found'	Empty state text when search returns no matches
coar.ui.select.noOptions	'No options available'	Empty state text when options list is empty
coar.ui.tagSelect.remove	'Remove'	Tag remove button aria-label
coar.ui.tagSelect.options	'Options'	Tag select listbox aria-label