# AUR0816

## Error Message

`AUR0816: Invalid [default-case] usage. Multiple 'default-case's are not allowed.`

## Description

This error occurs during template compilation/linking when an element using the `switch` attribute has more than one direct child element marked with the `default-case` attribute.

## Cause

The `switch` controller allows for multiple `case` attributes, each matching a specific value. However, it permits only zero or one `default-case` attribute to handle scenarios where none of the specific `case` values match the value bound to `switch`. This error indicates that you have provided more than one `default-case` within the same `switch` block.

## Solution

Ensure that within any given `switch` block, there is at most one element marked with the `default-case` attribute.

1. **Remove Extra `default-case`:** Review the children of the `switch` element and remove all but one `default-case` attribute.
2. **Combine Logic:** If you need complex default logic, place it within a single `default-case` element or `<template default-case>`.
3. **Use `case` Instead:** If a condition was mistakenly marked as `default-case`, change it to a specific `case="someValue"` if appropriate.

## Example

```html
<!-- Assume 'status' is a property on the view model -->

<!-- Incorrect: Multiple default-case elements -->
<div switch.bind="status">
  <div case="'active'">User is Active</div>
  <div default-case>Status Unknown</div>
  <p default-case>Please contact support if status is unexpected.</p> <!-- Second default-case -->
</div>

<!-- Correct: Only one default-case element -->
<div switch.bind="status">
  <div case="'active'">User is Active</div>
  <div case="'inactive'">User is Inactive</div>
  <div default-case>
    <p>Status Unknown.</p>
    <p>Please contact support.</p>
  </div>
</div>

<!-- Correct: Using <template> for default case -->
<div switch.bind="status">
  <template case="'active'">
    <span class="status-active">Active</span>
  </template>
  <template default-case>
    <span class="status-unknown">Unknown</span>
  </template>
</div>

<!-- Correct: No default-case (optional) -->
<div switch.bind="status">
  <div case="'active'">User is Active</div>
  <div case="'inactive'">User is Inactive</div>
  <!-- No default case needed -->
</div>
```

```typescript
// View Model Example
import { customElement } from 'aurelia';

@customElement({ /* ... */ })
export class MyComponent {
  status = 'pending'; // Example value
}
```

## Debugging Tips

* Carefully review all direct children of the element with the `switch` attribute.
* Count the number of children that have the `default-case` attribute; ensure the count is 0 or 1.
* Check for typos that might have accidentally resulted in multiple `default-case` attributes (e.g., copy-paste errors).

```
```


---

# 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/aur0816.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.