# Account selection - AccountSelector

{% hint style="info" %}
Availability of the functionality depends on the license and may not be available in all deployments.
{% endhint %}

The account selection component allows selecting it from a drop-down list. Each item can have separate descriptions, displayed in two rows. Additionally, the component supports grouping items appearing on the list.

![](/files/696214c6148a9020714d87ba5c5843388ef5b21c)

✅ **When to use:**

* Selecting an account from a drop-down list where the items have an additional description, account number, balance, or grouping.

:x: **When not to use:**

* A selection of a single option without additional data is sufficient. **Use**: [Radio](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/radio.md) / [Tile](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/kafel-tile.md) / [Combobox](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/pole-wyboru-wartosci-z-listy-combobox.md).

## Component properties

| Eximee Designer property                         | Attribute name in the Source | Description                                                                                                                                           |
| ------------------------------------------------ | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Field placeholder** (section **Data quality**) | placeholderText              | Text visible in the field before any value is selected.                                                                                               |
| **Empty option**                                 | emptyOption                  | Property added directly to the source. Value `true` displays the first item from the list; value `false` displays the placeholder (e.g. "Select..."). |

> More information about component properties: [Common component properties](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow.md)

## Component input parameters

| Parameter name        | Description                                                                                                         |
| --------------------- | ------------------------------------------------------------------------------------------------------------------- |
| **iconUrl**           | URL to the icon/image displayed next to the item on the list (Eximee server resources).                             |
| **text**              | Main label (description) of the item on the list.                                                                   |
| **description**       | Additional description of the item, e.g. account number or detailed information (supports text or boolean values).  |
| **suffix**            | Short additional description displayed at the end of the item, e.g. amount or currency.                             |
| **groupId**           | Group identifier. Items with the same ID are grouped and sorted alphabetically within the section.                  |
| **group**             | Flag determining whether the variant with grouping should be presented (`true`/`false`).                            |
| **ellipsis**          | Specifies whether `description` should be shortened to one line (`true`/`false`).                                   |
| **ellipsisText**      | Specifies whether `text` should be shortened to one line. Default `true`. Setting `suffix` forces the value `true`. |
| **singleAccountList** | Information whether to present a single account list view (`true`/`false`).                                         |
| **shortAccountList**  | Information whether to present a shortened version of the account list (`true`/`false`).                            |

## Component variants

![Illustration 1. Component with account names only](/files/7778b41ec0bdce1490048dafdde51149316384f4)

![Illustration 2. Component with additional description](/files/4183f0d66fe25ef423661ed5b3c438044c48ebf7)

![Illustration 3. Component with additional description and sections](/files/f59348809a647c29c9d39afca1861b94070f23ce)

## Component state information

After selecting a specific option, the component takes the value in the following format:

```
[{
    "suffix":"(14 731.21 PLN)",
    "description":"83 1123 1023 0000 2613 9510 0000",
    "groupId":"Accounts",
    "text":"Zero Account",
    "value":"4"
}]
```

If more than one item is selected, this list will contain more entries.

## Populating the component with values

To populate the component with data in the low-code model, External Data Source (EDS) must be configured. Below is an example returning a list of accounts:

```js
function callService(context) {
    // Retrieve context parameters (optional)
    const showSuffix = context.getFirstParameter("showSuffix") === "true";

    return [
        {
            "value": "1",
            "text": "Zero Account",
            "description": "83 1123 1023 0000 2613 9510 0000",
            "suffix": showSuffix ? "(14 731.21 PLN)" : null,
            "groupId": "Personal Accounts",
            "iconUrl": "/assets/icons/account_active.png",
            "ellipsis": true
        },
        {
            "value": "2",
            "text": "MC Credit Card",
            "description": "45 1010 1023 0123 2618 9510 1111",
            "suffix": showSuffix ? "(5 000.00 PLN)" : null,
            "groupId": "Cards",
            "iconUrl": "/assets/icons/card_gold.png",
            "ellipsis": true
        }
    ];
}
```

{% hint style="info" %}
Attention! If the component domain contains only one account, it is automatically selected, and the component becomes locked.
{% endhint %}

After a selection is made, the component stores the data in the following object array format:

```js
[{
    "value": "1",
    "text": "Zero Account",
    "description": "83 1123 1023 0000 2613 9510 0000",
    "suffix": "(14 731.21 PLN)",
    "groupId": "Personal Accounts"
}]
```

Demo application:

{% hint style="info" %}
Demo application: demoAccountSelector
{% endhint %}


---

# 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.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/2-pola-wyboru/wybor-rachunku-accountselector.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.