Внести вклад
Подробные руководства
Angular Aria

Select

Обзор

Паттерн, сочетающий combobox с listbox для создания dropdown с одиночным выбором, клавиатурной навигацией и поддержкой screen reader.

Использование

Паттерн select лучше всего подходит, когда пользователям нужно выбрать одно значение из знакомого набора опций.

Рассмотрите этот паттерн, когда:

  • Список опций фиксирован (меньше 20 элементов) — пользователи могут просмотреть и выбрать без фильтрации
  • Опции знакомы — пользователи узнают варианты без поиска
  • В формах нужны стандартные поля — выбор страны, штата, категории или статуса
  • Настройки и конфигурация — выпадающие меню для предпочтений или опций
  • Понятные метки опций — у каждого варианта есть отличимое, легко сканируемое имя

Избегайте этого паттерна, когда:

  • В списке больше 20 элементов — используйте паттерн Autocomplete для лучшей фильтрации
  • Пользователям нужно искать опции — Autocomplete даёт текстовый ввод и фильтрацию
  • Нужен множественный выбор — вместо этого используйте паттерн Multiselect
  • Очень мало опций (2–3) — radio buttons дают лучшую видимость всех вариантов

Возможности

Паттерн select сочетает директивы Combobox и Listbox, предоставляя полностью доступный dropdown с:

  • Клавиатурной навигацией — перемещение по опциям стрелками, выбор Enter, закрытие Escape
  • Поддержкой screen reader — встроенные ARIA-атрибуты для вспомогательных технологий
  • Кастомным отображением — показ выбранных значений с иконками, форматированием или rich content
  • Signal-based реактивностью — реактивное управление состоянием через сигналы Angular
  • Умным позиционированием — CDK Overlay обрабатывает края viewport и прокрутку
  • Поддержкой двунаправленного текста — автоматическая обработка языков справа налево (RTL)

Примеры

Базовый select

Пользователям нужен стандартный dropdown для выбора из списка значений. Combobox в паре с listbox даёт привычный опыт select с полной поддержкой accessibility.

Текстовый ввод предотвращается применением директивы ngCombobox напрямую к неинтерактивному host-элементу (например, div или button) вместо <input>. Пользователи взаимодействуют с dropdown стрелками и Enter — как с нативным элементом select.

Select с кастомным отображением

Опциям часто нужны визуальные индикаторы — иконки или badges — чтобы пользователи быстрее узнавали варианты. Кастомные шаблоны внутри опций позволяют rich-форматирование с сохранением accessibility.

Каждая опция показывает иконку рядом с меткой. Выбранное значение обновляется, показывая иконку и текст выбранной опции — понятная визуальная обратная связь.

Отключённый select

Select можно отключить, чтобы предотвратить взаимодействие пользователя, когда условия формы не выполнены. Состояние disabled даёт визуальную обратную связь и блокирует клавиатурное взаимодействие.

В состоянии disabled select показывает disabled-визуал и блокирует всё взаимодействие пользователя. Screen readers объявляют состояние disabled пользователям вспомогательных технологий.

Тестирование

Паттерн select можно тестировать комбинацией ComboboxHarness и ListboxHarness из @angular/aria/combobox/testing и @angular/aria/listbox/testing. Пример использования harnesses для тестирования компонента select:

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {HarnessLoader} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {ComboboxHarness} from '@angular/aria/combobox/testing';
import {ListboxHarness} from '@angular/aria/listbox/testing';
import {MySelectComponent} from './my-select'; // Your component

describe('MySelectComponent', () => {
  let fixture: ComponentFixture<MySelectComponent>;
  let loader: HarnessLoader;

  beforeEach(async () => {
    TestBed.configureTestingModule({
      imports: [MySelectComponent],
    });

    fixture = TestBed.createComponent(MySelectComponent);
    await fixture.whenStable();
    loader = TestbedHarnessEnvironment.loader(fixture);
  });

  it('should allow selecting an option', async () => {
    // Load the combobox harness (which acts as the select trigger)
    const select = await loader.getHarness(ComboboxHarness);

    // Verify it is closed initially
    expect(await select.isOpen()).toBe(false);

    // Open the dropdown
    await select.open();
    expect(await select.isOpen()).toBe(true);

    // Get the listbox harness from the popup
    const listbox = await select.getPopupWidget(ListboxHarness);
    const options = await listbox.getOptions();
    expect(options.length).toBe(3);

    // Click the second option
    await options[1].click();

    // Verify the dropdown closed and the value updated
    expect(await select.isOpen()).toBe(false);
    expect(await (await select.host()).text()).toContain('Option 2');
  });
});

API reference

Подробную API-документацию смотрите в следующих API reference:

Позиционирование

Паттерн select интегрируется с CDK Overlay для умного позиционирования. Используйте cdkConnectedOverlay для автоматической обработки краёв viewport и прокрутки.