Select

A versatile select component that allows users to choose one or more options from a dropdown list. It supports both single and multiple selection modes, includes search functionality, and provides various customization options.

Props

Name	Default	Type
`modelValue`	—	`SelectOption[]` `undefined` The selected option(s)
`options`	—	`SelectOption[]` Array of options to display
`single`	`true`	`boolean` Whether to allow only single selection
`readonly`	`false`	`boolean` Whether the select is readonly
`label`	—	`string` The label text for the select
`placeholder`	—	`string` Placeholder text when no option is selected
`expand`	`false`	`boolean` Expands the select to fill available width
`hint`	—	`string` Helper text displayed under the label
`search`	`false`	`boolean` Whether to enable search functionality
`required`	`false`	`boolean` Whether the select is required
`errors`	`[]`	`string[]` Array of error messages to display
`disabled`	`false`	`boolean` Whether the select is disabled
`size`	`m`	`s` `m` `l` Controls the input height and padding
`showClear`	`false`	`boolean` Shows a clear button when there is a selected value
`maxActiveOptions`	—	`number` Maximum number of options that can be selected (multiple mode only)
`maxHeight`	—	`number` `string` Maximum height of the dropdown before it starts scrolling
`noMobileDrawer`	`false`	`boolean` Disables mobile drawer behavior in the underlying dropdown
`transition-name`	—	`string` `none` Allows you to change or disable the Vue transition for dropdown appear. By default, placement-based transition is used. Set to `none` when using the View Transitions API to prevent the default animation from conflicting with your view transition.

Events

Name	Payload	Description
`update:modelValue`	`SelectOption[]` `undefined`	Emitted when selection changes

Types

interface SelectOption {
  value: any
  label: string
}