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

# List

**Category:** Atom | **Import:** Global

The `AwList` component renders an ordered list with optional items array or custom slot content.

## Overview

`AwList` provides a styled ordered list (`<ol>`) that can either render items from an array prop or use custom slot content. It's useful for displaying structured lists with consistent styling.

## Usage

### Basic Example with Items Array

```markup
<AwList :items="['Item 1', 'Item 2', 'Item 3']" />
```

### With Custom Item Slot

```markup
<AwList :items="items">
    <template #item="{ item, index }">
        <div>{{ index + 1 }}. {{ item.name }}</div>
    </template>
</AwList>
```

### With Custom Content

```markup
<AwList>
    <li>Custom item 1</li>
    <li>Custom item 2</li>
    <li>Custom item 3</li>
</AwList>
```

### With Item Classes

```markup
<AwList :items="items" item-class="italic" />
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| items | Array of items to render | `Array` | `false` | `[]` |
| itemClass | CSS class(es) for each list item | `String` / `Array` / `Object` | `false` | `''` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Custom list items (replaces items array) | - | Rendered items from array |
| item | Custom item template when using items array | `{ item, index }` | Item value/text |

### Events

No events are emitted by this component.

## Component Behavior

### List Rendering Modes

The component supports two rendering modes:

1. **Items Array Mode**: When `items` prop is provided, items are automatically rendered as `<li>` elements
2. **Default Slot Mode**: When using default slot, you provide `<li>` elements directly

### Items Array Rendering

- Each item in the `items` array is rendered as a list item (`<li>`)
- Items can be primitives (strings, numbers) or objects
- Each item gets a key based on its index
- The `itemClass` prop is applied to each `<li>` element
- By default, items are rendered as their string representation

### Item Slot Template

When using the `item` slot with the `items` array:
- **Slot props provided:**
  - `item` - The current item from the array
  - `index` - The zero-based index of the item
- **Use case:** Custom rendering for each item while maintaining automatic list generation
- **Example:** Displaying object properties, adding icons, conditional rendering

### Default Slot Override

When using the default slot:
- Completely replaces the automatic item rendering
- You must provide `<li>` elements yourself
- The `items` and `itemClass` props are ignored
- **Use case:** Full control over list structure, nested lists, custom markup

### Item Classes

The `itemClass` prop accepts:
- **String:** Single class name or space-separated classes (e.g., `"italic"`, `"text-sm font-bold"`)
- **Array:** Array of class names (e.g., `["italic", "text-sm"]`)
- **Object:** Class object (Vue class binding syntax, e.g., `{ italic: true, bold: isImportant }`)
- Applied to each `<li>` when using `items` array
- Ignored when using default slot
- Useful for applying Tailwind utility classes to all list items

### Structure

**With items array:**
```
<ol class="aw-list">
  <li :class="itemClass">
    <slot name="item" :item="item" :index="index">
      {{ item }}
    </slot>
  </li>
  ...
</ol>
```

**With default slot:**
```
<ol class="aw-list">
  <slot>
    <!-- Your custom <li> elements -->
  </slot>
</ol>
```

## Related Components

- `AwCard` - Card component that may contain lists
- `AwFlow` - Flow layout for list-like layouts

## Notes

- **Import Method:** Global - Available as atom component
- Renders as an ordered list (`<ol>`) element
- When `items` prop is provided, items are rendered automatically
- When using default slot, provide `<li>` elements directly
- Use `item` slot for custom item rendering when using `items` array