---
metaTitle: Select component | AwesCode UI
meta:
  - name: description
    content: The <AwSelect /> component is used to render Select - UI Vue component for AwesCode UI.
title: Select
---

# AwSelect

**Category:** Molecule | **Import:** Global

The `AwSelect` component is a powerful, feature-rich select dropdown that supports static options, AJAX loading, multiple selection, search, and custom option rendering. It's globally available and can be used with dynamic `component :is` bindings.

## Overview

`AwSelect` provides a comprehensive select solution with:
- Static array options or AJAX function-based options
- Single and multiple selection modes
- Built-in search functionality with debouncing
- Custom option labels and value tracking
- Option grouping support
- Mobile-optimized interface
- Loading states and error handling
- Custom slot support for flexible rendering
- Keyboard navigation

## Usage

### Basic Example

```markup
<AwSelect 
    :options="['Option 1', 'Option 2', 'Option 3']"
    v-model="selected"
    label="Select something"
/>
```

### With Objects

```markup
<AwSelect 
    :options="[
        { id: 1, name: 'Option 1' },
        { id: 2, name: 'Option 2' }
    ]"
    v-model="selected"
    option-label="name"
    track-by="id"
    label="Select option"
/>
```

### Multiple Selection

```markup
<AwSelect 
    :options="options"
    v-model="selected"
    multiple
    label="Select multiple"
/>
```

### AJAX Options

```markup
<AwSelect 
    :options="(search) => ({ url: '/api/items', params: { search } })"
    v-model="selected"
    track-by="id"
    option-label="name"
    label="Search items"
/>
```

### With Search

```markup
<AwSelect 
    :options="options"
    v-model="selected"
    :searchable="true"
    label="Searchable select"
/>
```

### Clearable

```markup
<AwSelect 
    :options="options"
    v-model="selected"
    clearable
    label="Clearable select"
/>
```

### Custom Option Label

```markup
<AwSelect :options="options" v-model="selected" label="Select">
    <template #option-label="{ optionLabel, option }">
        <span class="flex items-center">
            <AwIcon name="awesio/user" class="mr-2" />
            {{ optionLabel }}
        </span>
    </template>
</AwSelect>
```

### Not Found / Create New

```markup
<AwSelect 
    :options="options"
    v-model="selected"
    @not-found="createItem"
    @not-equal="createItem"
    label="Select or create"
>
    <template #not-found="{ searchPhrase }">
        Create new: {{ searchPhrase }}
    </template>
    
    <template #not-equal="{ searchPhrase }">
        Create: {{ searchPhrase }}
    </template>
</AwSelect>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| options | Options array or AJAX function | `Array` / `Function` | `false` | `[]` |
| value | Selected value(s) | `Any` | `false` | `null` |
| label | Field label | `String` / `Function` | `false` | `''` |
| optionLabel | Property name or function to get option label | `String` / `Function` | `false` | `''` |
| trackBy | Property name to track option value | `String` | `false` | `''` |
| optionDisabled | Function to determine if option is disabled | `Function` | `false` | `() => false` |
| searchable | Enable search functionality | `Boolean` | `false` | `true` |
| clearable | Show clear button when value exists | `Boolean` | `false` | `false` |
| multiple | Allow multiple selection | `Boolean` | `false` | `false` |
| multipleSeparator | Separator for multiple values display | `String` | `false` | `', '` |
| maxSearchItems | Maximum items to show in dropdown | `Number` | `false` | `100` |
| searchPreload | Preload options on open (AJAX mode) | `Array` / `Object` / `Boolean` | `false` | `true` |
| searchMin | Minimum characters to trigger search | `Number` | `false` | `0` |
| debounce | Search debounce delay in ms | `Number` | `false` | `400` |
| placeholder | Placeholder text | `String` | `false` | `''` |
| createPlaceholder | Placeholder when creating new item | `String` | `false` | `''` |
| createConfirmText | Confirmation text for creating new item | `String` | `false` | `'Are you sure, you want to create a new item?'` |

**AJAX Function Format:**
```javascript
(search) => {
  return {
    url: '/api/items',
    params: { search, page: 1 }
  }
}
// or
(search) => '/api/items?search=' + search
```

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Custom dropdown content | - | Options list |
| dropdown | Custom dropdown wrapper | - | Default dropdown |
| option-label | Custom option label rendering | `{ option, optionLabel, optionValue, index, active, disabled }` | Option label text |
| not-found | Content when no options found | `{ searchPhrase }` | - |
| not-equal | Content when search doesn't match (create option) | `{ searchPhrase }` | - |
| prefix | Content before input | - | - |
| postfix | Content after input | - | - |
| element | Custom input element | `{ value }` | Default input |
| create-icon | Custom create button icon | - | Plus circle icon |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| input | `value, option` (single) or `values, options` (multiple) | Emitted when selection changes |
| search | `String` | Emitted on search input (when using custom search handler) |
| not-found | `String` | Emitted when search returns no results |
| not-equal | `String` | Emitted when search doesn't match any option |
| preloaded | `Array` | Emitted when AJAX options are preloaded |
| clear | - | Emitted when clear button is clicked |

## Related Components

- `AwInput` - Base input component used internally
- `AwDropdown` - Dropdown component used for options list
- `AwButton` - Button component for clear/create actions

## Notes

- **Import Method:** Global - Component is globally registered for use with dynamic `component :is`
- When `options` is a function, it's treated as AJAX mode
- AJAX requests use `$axios` instance (must be configured)
- Search is debounced by default (400ms)
- Mobile interface uses full-screen overlay
- Keyboard navigation: Arrow keys to navigate, Enter to select
- Options are filtered client-side for static arrays
- For AJAX mode, search is handled server-side
- `trackBy` is used to match selected values with options
- `optionLabel` can be a property path (e.g., `'user.name'`) or function
- Multiple selection returns array of values
- Component automatically handles option highlighting and keyboard focus
- Uses `body-scroll-lock` for mobile dropdown
- Loading state shown during AJAX requests