# Typeahead Item

## Usage

Default dropdown item renderer for typeahead results. Shows label with optional icon, description, and avatar. Exported for use in custom `renderItem` implementations.

```ts
import { TypeaheadItem } from '@astryx-vue/core/Typeahead'
```

The default row of a [Typeahead](/en/components/typeahead) dropdown is already this component, so most pages never name it. Import it when the row has to show something the plain result does not, such as a role or a team: put it in the `item` slot of `Typeahead` (the port's `renderItem`) and pass the extra text as `description`. The wrapper that holds highlight, selection, and keyboard behavior stays the same, so the custom row still answers to the arrow keys and Enter.

`item.description` is drawn when no `description` prop is given, so a source that already carries one needs no prop at all.

## Examples

Common configurations, variations, and states.

### Basic

A typeahead whose results are rendered with TypeaheadItem, adding a secondary description below each label. Use inside renderItem to keep custom results visually consistent.

```vue
<script setup lang="ts">
import { createStaticSource } from '@astryx-vue/core'
import { Typeahead, TypeaheadItem } from '@astryx-vue/core/Typeahead'
import { ref } from 'vue'

interface PersonItem {
  id: string
  label: string
  auxiliaryData: { role: string }
}

const people: PersonItem[] = [
  { id: '1', label: 'Alice Johnson', auxiliaryData: { role: 'Engineer' } },
  { id: '2', label: 'Bob Smith', auxiliaryData: { role: 'Designer' } },
  { id: '3', label: 'Charlie Brown', auxiliaryData: { role: 'Product Manager' } },
]

const source = createStaticSource(people)
const value = ref<PersonItem | null>(null)
</script>

<template>
  <div class="typeahead-item-field">
    <Typeahead
      v-model="value"
      label="Assignee"
      placeholder="Search people..."
      :search-source="source"
      :debounce-ms="0"
      has-entries-on-focus
    >
      <template #item="{ item }">
        <TypeaheadItem :item="item" :description="item.auxiliaryData.role" />
      </template>
    </Typeahead>
  </div>
</template>

<style scoped>
.typeahead-item-field {
  width: 20rem;
  max-width: 100%;
}
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `item` | `SearchableItem` | — | The search result this row shows. Required; the label comes from its `label`. |
| `description` | `string` | — | Text under the label. Wins over the item's own `description`. |
| `group` | `string` | — | Accepted so the prop name matches upstream. The row draws no heading; the dropdown groups rows itself from `item.auxiliaryData.group`. |
| `isDisabled` | `boolean` | `false` | Paints the row as unavailable. It stays in the list and the arrows skip it. |

## Slots

- `icon`: icon or avatar shown before the label. The wrapper is hidden from assistive technology, so the artwork needs no label.

The row reads `item.disabled` on its own as well, so a disabled result looks disabled even without the prop.