Vitral 0.2
Form

Select

Choose one option from a list, with an optional filter that ignores case and accents.

WAI-ARIA tested

Import

main.ts
import { Select } from '@vitral/vue';

Basic

Value: null
<script setup lang="ts">import { Label, Select, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const cities = [    { name: 'São Paulo', code: 'SP' },    { name: 'Rio de Janeiro', code: 'RJ' },    { name: 'Belo Horizonte', code: 'BH' },    { name: 'Brasília', code: 'BSB' },    { name: 'Curitiba', code: 'CWB' },    { name: 'Florianópolis', code: 'FLN', disabled: true },    { name: 'Porto Alegre', code: 'POA' },    { name: 'Recife', code: 'REC' },    { name: 'Salvador', code: 'SSA' },    { name: 'Manaus', code: 'MAO' }]; const city = ref<string | null>(null);</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="sel-city">City</Label>        <Select id="sel-city" v-model="city" :options="cities" option-label="name" option-value="code" option-disabled="disabled" placeholder="Select a city" show-clear checkmark />        <small style="color: var(--vt-text-muted-color)">Value: {{ city ?? 'null' }}</small>    </StackPanel></template>

Filter

<script setup lang="ts">import { Label, Select, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const cities = [    { name: 'São Paulo', code: 'SP' },    { name: 'Rio de Janeiro', code: 'RJ' },    { name: 'Belo Horizonte', code: 'BH' },    { name: 'Brasília', code: 'BSB' },    { name: 'Curitiba', code: 'CWB' },    { name: 'Florianópolis', code: 'FLN' },    { name: 'Porto Alegre', code: 'POA' },    { name: 'Recife', code: 'REC' },    { name: 'Salvador', code: 'SSA' },    { name: 'Manaus', code: 'MAO' }]; const city = ref<string | null>('REC');</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="sel-search">City (searchable)</Label>        <Select id="sel-search" v-model="city" :options="cities" option-label="name" option-value="code" filter placeholder="Search…" />    </StackPanel></template>

Groups

<script setup lang="ts">import { Label, Select, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const groups = [    { label: 'Brazil', items: [{ name: 'São Paulo' }, { name: 'Recife' }] },    { label: 'Portugal', items: [{ name: 'Lisboa' }, { name: 'Porto' }] },    { label: 'Angola', items: [{ name: 'Luanda' }] }]; const city = ref<unknown>(null);</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="sel-group">City by country</Label>        <Select id="sel-group" v-model="city" :options="groups" option-group-label="label" option-label="name" placeholder="Pick a city" />    </StackPanel></template>

Sizes and states

<script setup lang="ts">import { Select } from '@vitral/vue'; const cities = [{ name: 'São Paulo' }, { name: 'Rio de Janeiro' }, { name: 'Brasília' }, { name: 'Curitiba' }, { name: 'Recife' }];</script> <template>    <Select :options="cities" option-label="name" placeholder="Small" size="small" aria-label="Small" />    <Select :options="cities" option-label="name" placeholder="Filled" variant="filled" aria-label="Filled" />    <Select :options="cities" option-label="name" placeholder="Invalid" invalid aria-label="Invalid" />    <Select :options="cities" option-label="name" placeholder="Loading" loading aria-label="Loading" />    <Select :options="cities" option-label="name" placeholder="Disabled" disabled aria-label="Disabled" /></template>

API

Read from packages/vue/src/components/Select/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
optionsany[]—
optionLabelstringField (dotted path) holding an option's text. Without it, options are shown as they are.
optionValuestringField holding the value v-model receives. Without it, the whole option is the value.
optionDisabledstring—
optionGroupLabelstringTurns `options` into groups: this field is each group's label…
optionGroupChildrenstring…and this one its options. Defaults to `items`.
dataKeystringCompare object values by this field instead of structurally.
placeholderstring—
disabledboolean—
invalidboolean—
sizeSize—
variantInputVariant—
fluidboolean—
filterbooleanAdds a search box to the panel: the combobox.
filterPlaceholderstring—
filterFieldsstring[]Fields to search instead of the label.
filterMatchModestringAny registered match mode; accent- and case-insensitive `contains` by default.
showClearboolean—
loadingboolean—
checkmarkbooleanMarks the selected option with a check, as well as with the highlight.
emptyMessagestring—
emptyFilterMessagestring—
placementOverlayPlacement—
appendTostring`'body'` (the default), `'self'` to render in place, or a selector.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
changeevent: SelectChangeEvent—
show——
hide——
filterquery: string—
focusevent: FocusEvent—
blurevent: FocusEvent—

Slots

NameSlot propsDescription
value(props: { value: unknown; option: unknown; placeholder?: string })—
option(props: { option: unknown; index: number; selected: boolean; focused: boolean })—
optiongroup(props: { group: unknown })—
header——
footer——
empty——
dropdownicon(props: { open: boolean })—

Used in these templates