Skip to main content

Select

    The Select component allows you to choose one or multiple options from a collapsed dropdown with options.

    OverviewPropertiesUsageAccessibility
    Note

    See Accessibility in Design Foundations for explanations of key concepts and best practices.

    Accessible names and roles​

    • Do verify that the visible label matches the accessible name, if a visible label is present.
    • Do provide an aria-label that describes the purpose of the select element in its context, if no visible label is present.

    Keyboard accessibility and focus​

    Select handles focus management out of the box. When the dropdown opens, focus stays on the combobox and the active option is announced via aria-activedescendant. When the dropdown closes, focus returns to the trigger.

    • Don't override the component's built-in focus handling. The active option must be announced via aria-activedescendant so screen readers can track the selection correctly.

    State announcements​

    Select handles state announcements out of the box: aria-expanded="true" when open; aria-expanded="false" when closed.

    • Do ensure that the options follow in a logical tab order so users can navigate into them after the state is announced.
    Still have questions?
    Find answers in the Dynatrace Community