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

# AwChipSelect

**Category:** Organism | **Import:** Dynamic

The `AwChipSelect` component is a select dropdown that displays the selected value as a chip and shows options in a dropdown menu. It's designed for selecting from a list of chip-style options.

## Overview

`AwChipSelect` provides a chip-based select solution with:
- Chip display for selected value
- Dropdown menu with chip options
- Loading state support
- Readonly/disabled states
- Keyboard navigation
- Custom option rendering

## Usage

### Basic Example

```markup
<AwChipSelect 
    v-model="selected"
    :options="[
        { id: 1, text: 'Option 1', color: 'success' },
        { id: 2, text: 'Option 2', color: 'error' },
        { id: 3, text: 'Option 3', color: 'accent' }
    ]"
/>
```

### With Loading State

```markup
<AwChipSelect 
    v-model="selected"
    :options="options"
    :loading="isLoading"
/>
```

### Readonly Mode

```markup
<AwChipSelect 
    v-model="selected"
    :options="options"
    readonly
/>
```

### Without Text (Icon Only)

```markup
<AwChipSelect 
    v-model="selected"
    :options="options"
    no-text
/>
```

### Filled Style

```markup
<AwChipSelect 
    v-model="selected"
    :options="options"
    filled
/>
```

### Custom Selected Display

```markup
<AwChipSelect v-model="selected" :options="options">
    <template #selected="{ selected }">
        <AwChip :text="selected.text" :color="selected.color">
            <template #right>
                <AwBadge :text="selected.count" />
            </template>
        </AwChip>
    </template>
</AwChipSelect>
```

### Custom Option Display

```markup
<AwChipSelect v-model="selected" :options="options">
    <template #option="{ id, text, color, select }">
        <AwChip :text="text" :color="color" @click="select(id)">
            Custom option
        </AwChip>
    </template>
</AwChipSelect>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| value | Selected option ID | `Number` / `String` | `false` | `null` |
| options | Array of option objects | `Array` | `true` | - |
| readonly | Prevent selection changes | `Boolean` | `false` | `false` |
| disabled | Disable the component | `Boolean` | `false` | `false` |
| loading | Show loading spinner | `Boolean` | `false` | `false` |
| noText | Hide text in selected chip | `Boolean` | `false` | `false` |
| filled | Use filled chip style | `Boolean` | `false` | `false` |

**Option Object Format:**
```javascript
{
  id: 1,              // Required: unique identifier
  text: 'Option 1',   // Optional: display text
  color: 'success',   // Optional: chip color
  icon: 'awesio/check',     // Optional: icon name
  // ... other chip props
}
```

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| selected | Custom selected chip display | `{ selected }` | Default chip with selected option |
| option | Custom option chip display | `{ id, text, ...props, index, select }` | Default chip with option data |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| input | `Number` / `String` | Emitted when option is selected (option ID) |

### Mixins

- `arrowFocusMixin` - Provides keyboard navigation support

## Related Components

- `AwChip` - Chip component used for display
- `AwDropdown` - Dropdown component for menu
- `AwDropdownButton` - Dropdown button component

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Options array must contain objects with `id` property
- Selected option is found by matching `id` with `value`
- When `noText` is true, text is omitted from selected chip
- Loading state shows spinner in chip
- Dropdown closes when component is disabled/readonly
- Keyboard navigation: Arrow keys to navigate, Enter to select
- Component uses `AwDropdown` with custom positioning
- All chip props can be passed in option objects