---
metadata:
  - name: generator
    content: Diplodoc Platform v5.54.2
  - property: og:type
    content: article
  - property: article:section
    content: Plugin platform
  - property: og:title
    content: QueueSelect
  - property: article:tag
    content: Техническая инструкция
alternate:
  - https://yandex.ru/support/tracker/en/plugins/components/queue-select.md
  - https://yandex.ru/support/tracker/ru/plugins/components/queue-select.md
  - href: en/plugins/components/queue-select.md
    type: text/markdown
    title: Markdown version
  - href: ../../llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.ru/support/tracker/en/llms.txt

[← Back to components list](https://yandex.ru/support/tracker/en/plugins/components/index.md)

# QueueSelect {#queue-select}

A dropdown for selecting a Tracker queue. Supports a static queue list, asynchronous search/suggest, icons, loading state, and a confirmation dialog before changing the selection.

## Basic usage {#usage}

```tsx
import {QueueSelect} from '@weavix/tracker-components';
import type {QueueInfo} from '@weavix/tracker-components';

const queues: QueueInfo[] = [
    {key: 'DEV', display: 'Development'},
    {key: 'DESIGN', display: 'Design'},
];

<QueueSelect
    queues={queues}
    defaultQueue={queues[0]}
    onChange={(queue) => console.log(queue)}
/>;
```

## Using with Tracker API (static list + async suggest) {#tracker-api}

Loads queues once on mount and switches to the suggest endpoint when the user starts typing.

```tsx
import React, {useEffect, useState} from 'react';
import {CancellablePromise} from '@gravity-ui/sdk';
import {QueueSelect} from '@weavix/tracker-components';
import type {QueueInfo} from '@weavix/tracker-components';

interface Props {
    trackerApi: TrackerApi;
    onChange: (queue: QueueInfo) => void;
}

export const QueueSelectWithApi: React.FC<Props> = ({trackerApi, onChange}) => {
    const [queues, setQueues] = useState<QueueInfo[]>([]);
    const [loading, setLoading] = useState(true);

    // Load all queues on mount
    useEffect(() => {
        trackerApi.v3
            .get['/queues']()
            .then((result) => setQueues(result.data))
            .finally(() => setLoading(false));
    }, [trackerApi]);

    // Suggest on user input
    const handleSearch = (text: string): CancellablePromise<QueueInfo[]> => {
        const promise = trackerApi.v3
            .get['/queues/_suggest']({queryParams: {input: text, fields: []}})
            .then((result) => result.data);

        return new CancellablePromise(promise, () => {});
    };

    return (
        <QueueSelect
            queues={queues}
            loading={loading}
            onSearch={handleSearch}
            onChange={onChange}
            placeholder="Select a queue"
        />
    );
};
```

## Main props {#props}

#|
|| **Prop** | **Type** | **Default** | **Description** ||
|| `queues` | `QueueInfo[] | string[]` | — | List of queues to display ||
|| `defaultQueue` | `QueueInfo | string` | — | Queue selected by default on mount ||
|| `loading` | `boolean` | `false` | Loading state ||
|| `onSearch`
|

```ts
(text: string) =>
  Promise<QueueInfo[]>
```

| — | Async search on text input ||
|| `onChange`
|

```ts
(queue: QueueInfo) =>
  void
```

| — | Callback when the selected queue changes ||
|| `initialEmpty` | `boolean` | `false` | Don't select a queue by default on mount ||
|| `withoutSuggest` | `boolean` | `false` | Disable the search field inside the dropdown ||
|| `withValueIcon` | `boolean` | `false` | Show the queue icon next to the selected value ||
|| `confirmUpdate`
|

```ts
() =>
  Promise<{success: boolean}>
```

| — | Async check before applying the new selection ||
|| `error` | `string | boolean` | — | Error message or error flag ||
|| `placeholder` | `string` | — | Placeholder when no selection is made ||
|| `size` | `'xs'` \| `'s'` \| `'m'` \| `'l'` \| `'xl'` | `'m'` | Control size ||
|| `withBorder` | `boolean` | `false` | Show a border around the control ||
|| `className` | `string` | — | Additional CSS class ||
|#