<!-- This file is auto-generated by the docs:generate-viewhelper-docs command. Do not edit directly -->

# ui:listCollection

**Reference:** [View Source](https://github.com/jramke/fluid-primitives/tree/main/Classes/ViewHelpers/ListCollectionViewHelper.php)

Create a ListCollection from an array of items.

This is needed for components like [Select](/docs/components/select.md) that expect a Zag.js [ListCollection](https://zagjs.com/guides/collection) instance. This ViewHelper is a first approach to get this DX working. Currently you should format your items like `{value: string, label: string, disabled: boolean}`.

The `itemToString`, `itemToValue`, `isItemDisabled` and `groupBy` props are currently supported as key props like `groupByKey`.

## Example
```html
<ui:listCollection
    items="{
        0: {value: 'apple', label: 'Apple'},
        1: {value: 'banana', label: 'Banana', disabled: true}
    }"
    as="collection"
/>
```

Grouped example:

```html
<ui:listCollection
    items="{
        0: {value: 'apple', label: 'Apple', type: 'Fruits'},
        1: {value: 'banana', label: 'Banana', disabled: true, type: 'Fruits'},
        2: {value: 'carrot', label: 'Carrot', type: 'Vegetables'},
        3: {value: 'broccoli', label: 'Broccoli', type: 'Vegetables'}
    }"
    as="collection"
    groupByKey="type"
/>
```

## Arguments

| Name | Type | Description | Required | Default |
|------|------|-------------|----------|--------|
| `as` | string | Variable name to assign the result to | No | '' |
| `items` | array | The items of the collection. `{value: string, label: string, disabled: boolean}`. | No | [] |
| `itemToValueKey` | string | The key to use for the item value. | No | - |
| `itemToStringKey` | string | The key to use for the item label. | No | - |
| `isItemDisabledKey` | string | The key to use for the item disabled state. | No | - |
| `groupByKey` | string | The key to use for grouping items. | No | - |
| `groupSort` | array\|string | Sorting for groups. | No | - |