AbpSelect

AbpSelect chooses from a known list of options. Use a typeahead when choices need a remote search.

Single and multiple selection

<template>
  <AbpFormField v-slot="{ id }" label="Category">
    <AbpSelect
      :id="id"
      v-model="category"
      :options="options"
      placeholder="Choose a category"
      clearable
    >
      <template #option="{ option, selected }"
        ><span>{{ selected ? '✓ ' : '' }}{{ option.label }}</span></template
      >
    </AbpSelect>
  </AbpFormField>
  <AbpFormField v-slot="{ id }" label="Several categories">
    <AbpSelect :id="id" v-model="categories" :options="options" multiple clearable />
  </AbpFormField>
  <output>Single: {{ category ?? 'none' }}; multiple: {{ categories.join(', ') || 'none' }}</output>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { AbpFormField, AbpSelect, type AbpOption } from '@lsw-abpvue/theme-shared';
const category = ref<string | null>(null);
const categories = ref<string[]>([]);
const options: AbpOption[] = [
  { value: 'fiction', label: 'Fiction', group: 'Books' },
  { value: 'science', label: 'Science', group: 'Books' },
  { value: 'archived', label: 'Archived', disabled: true },
];
</script>

The first control has a placeholder and clear command; the second allows several categories. Archived is disabled. The custom option slot adds a check mark while keeping a plain label for the trigger.

Options and values

Each AbpOption has value and label, with optional disabled and group. Labels are already localized text: build options with a computed value if their labels must change with language. Values can be string, number, boolean or null; keep the same type in the model and options. Numeric 1 and string '1' are different choices.

Single selection stores one value. multiple stores an array; initialize it to []. clearable exposes clearing, producing an empty selection. A placeholder describes the absence of a selection; it is not a selectable business value.

Loading options

The component receives options; it does not fetch them. Load through a generated service or RestService, show a separate loading state and disable interaction until the initial choices are ready. When editing, include the currently selected value in the available choices so its label can be resolved. Do not erase a stored value just because a request failed.

Customized rendering and keyboard use

The option slot receives { option, selected }. Preserve the label's meaning and avoid nested buttons inside a choice. Users can open and navigate the menu with the keyboard. Connect labels/errors through AbpFormField as shown in the input guide.

For remote authors or large catalogues, see typeahead.

Props, events and slots

Source

Types come from the public contract and defaults from the current implementation. A dash means no explicit default; optional boolean props are normally false when omitted.

Props

Name	Type	Required	Default
modelValue	AbpOptionValue | readonly AbpOptionValue[] | undefined	No	—
options	readonly AbpOption[]	Yes	—
multiple	boolean | undefined	No	—
placeholder	string | undefined	No	—
disabled	boolean | undefined	No	—
readonly	boolean | undefined	No	—
invalid	boolean | undefined	No	—
clearable	boolean | undefined	No	—
id	string | undefined	No	—
name	string | undefined	No	—
ariaDescribedby	string | undefined	No	—
ariaLabel	string | undefined	No	—

Events

Name	Payload
update:modelValue	[value: AbpOptionValue | AbpOptionValue[]]

Slots

Name	Context
option	(context: { option: AbpOption; selected: boolean }) => unknown