# AUR0654

## Error Message

`AUR0654: Array values can only be bound to a multi-select.`

## Description

This error occurs when you attempt to bind an array object from your view model to the `value` property of an HTML `<select>` element, but the `<select>` element is missing the `multiple` attribute. Standard single-selection `<select>` elements can only have their `value` bound to a single value (typically a string or number corresponding to one of the `<option>` values), not an array of values.

## Cause

The direct cause is a mismatch between the data type being bound (an array) and the expected data type for a single-selection `<select>` element's value (a single primitive value).

1. **Binding an Array Intentionally:** You intended to create a multiple-selection list but forgot to add the `multiple` attribute to the `<select>` tag.
2. **Binding an Array Unintentionally:** The view model property bound to the `<select>` element's `value` happens to hold an array value when you expected it to hold a single string or number. This could be due to logic errors in your view model or data transformation issues.

## Solution

1. **Add `multiple` Attribute:** If you intend for the user to be able to select multiple options and your view model property is an array, add the `multiple` attribute to your `<select>` element.

   ```html
   <select value.bind="selectedItems" multiple>
     <!-- options -->
   </select>
   ```
2. **Bind a Single Value:** If the `<select>` element should only allow a single selection, ensure that the view model property you bind to its `value` holds a single primitive value (string, number) that corresponds to one of the `<option>` values, not an array. Adjust your view model logic if necessary.

   ```html
   <select value.bind="selectedItem">
     <!-- options -->
   </select>
   ```

   ```typescript
   // View Model
   export class MyViewModel {
     selectedItem: string = 'option2'; // Bind a single value
     // selectedItems: string[] = ['option1', 'option3']; // Don't bind this array to a single-select
   }
   ```

## Example

```html
<!-- Incorrect: Binding an array to a single-select element -->
<select value.bind="selectedColors">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

<!-- Correct (Multiple Selection): Add the 'multiple' attribute -->
<select value.bind="selectedColors" multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

<!-- Correct (Single Selection): Bind a non-array property -->
<select value.bind="selectedColor">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
```

```typescript
// View Model
export class MyViewModel {
  // For multi-select
  selectedColors: string[] = ['red', 'blue'];

  // For single-select
  selectedColor: string = 'green';

  availableColors = ['red', 'green', 'blue']; // Example source for options
}
```

## Debugging Tips

* Check the `<select>` element in your HTML template. Does it have the `multiple` attribute?
* Inspect the value and type of the view model property bound to the `<select>` element's `value`. Use `console.log(typeof this.myProperty, this.myProperty)` or breakpoints.
* If it's an array, decide whether the select should be `multiple` or if the bound property should hold a single value instead of an array. Adjust the template or view model accordingly.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aurelia.io/developer-guides/error-messages/runtime-html/aur0654.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.