Select
The e-select component handles single and multiple selection with support for primitive or object items, optional autocomplete, chips, loading state, and customizable rendering via slots.
Use this page to compare setup patterns fast, validate object/value mapping behavior, and build production-ready form flows with clear feedback.
Usage
Use this baseline playground to configure Select in context: color, outlined, clearable, readonly, disabled, multiple, chips, and autocomplete from one control panel.
Item mapping
Map object collections using item-text and item-value, then compare return-object on/off to choose the right model contract for forms and APIs.
Visual variants
Compare default and outlined variants across interactive, readonly, and disabled states to define hierarchy and readability in real form layouts.
Multiple and chips
Use multiple selection for tag-like inputs and chip mode when selected values should stay visible and removable at a glance.
Autocomplete and search
Drive search with update:search and filtered items to support long option lists without sacrificing keyboard flow.
Named slots
Customize the list and selected value with item and selection slots for richer metadata and contextual rendering.
Async loading
Use loading with remote item hydration to keep form feedback explicit while data is being fetched.
Validation
Validate select-driven forms with rule-based feedback and submit-state control to keep actions predictable.
Support ticket
Complete required fields to continue
Props
Use the API table as the source of truth for supported props, accepted types, defaults, and behavior notes.
| Property | Type | Default |
|---|---|---|
| modelValue | SelectModelValue | undefined |
Current selected value. Supports single value or array when multiple=true. | ||
| items | SelectItemType[] | [] |
Available options list. Supports primitive and object items. | ||
| itemText / itemValue | string | "text" / "value" |
Object keys used to resolve rendered label and emitted value. | ||
| multiple | boolean | false |
Enables multiple selection mode. | ||
| returnObject | boolean | false |
Emits whole object item instead of normalized primitive value. | ||
| autocomplete / search | boolean / string | number | false / undefined |
Allows editable input and external search binding through update:search. | ||
| chip / chipClosable | boolean | false / false |
Renders selected values as chips and optionally allows closing single-chip selection. | ||
| placeholder | string | undefined |
Placeholder text shown when no value is selected. | ||
| prefix / suffix | string | undefined |
Decorative text rendered before or after the selection region. | ||
| loading | boolean | false |
Displays loading state and linear indicator while options are being resolved. | ||
| outlined | boolean | false |
Uses outlined visual variant for the field container. | ||
| disabled / readonly / clearable | boolean | false / false / false |
Core interaction states inherited from field base behavior. | ||
| color / menuColor | string | "primary" / undefined |
Theme colors for field state and dropdown surface. | ||
| rules / detailErrors | FieldRule[] | string[] | undefined |
Validation rules and explicit error messages for details area. | ||