@agala-labs/ui

Creatable Select

Builds a multi-value selection in a collision-aware top-layer listbox and can create missing options.

Examples

Default

Vue

<AgalaCreatableSelect v-model="skills" :options="options" creatable @create="addSkill" />

Import

import { AgalaCreatableSelect } from '@agala-labs/ui'

API

Prop	Type	Default	Description
options	CreatableSelectOption[]	—	Required options.
modelValue	string[]	—	Selected IDs.
creatable	boolean	true	Allows new values.
labelKey / idKey	string	—	Keys used for custom records.
maxDisplayed	number	—	Maximum visible chips.
debounce	number	—	Search debounce in milliseconds.
disabled	boolean	false	Disables interaction.

Events

• update:modelValue(values: string[])
• create(text: string)
• search(query: string)

Accessibility

Supports combobox keyboard navigation and announces selected chips through native labels.