Select

A flexible component that allows users to select a value from a list of options. Implements the ARIA listbox pattern for proper accessibility support.

Can be controlled or uncontrolled

Full focus management

Typeahead support

Full keyboard navigation

Architecture

so-select
Slot: trigger You must place an so-button here.
so-button
Slot: default
so-select-icon
Slot: content
so-select-content
Slot: default
so-select-item
Slot: default Place the text here.

Reference

  • Select

    The root container that manages the select's state and behavior. Coordinates the interaction between trigger, content, and optional backdrop components.

    • Attributes

      • default-value
        any | any[]
        /
        default: -

        The initial selected value when the select is rendered. Use when you do not need to control the selected value.

      • type
        enum
        /
        default: single

        Defines if the select is a single-select or a multi-select.

      • value
        any | any[]
        /
        default: -

        The controlled value of the select. Must be used in conjunction with onValueChange.

    • Events

      • onValueChange

        Event handler called when the selected value changes.

  • Icon

    A visual indicator used to show the current state of the select.

  • Content

    The container that holds the dropdown menu items. Manages keyboard interactions, focus behavior and positioning behavior. Implements proper ARIA attributes for accessibility and handles collision detection with viewport boundaries.

    • Attributes

      • aria-label
        string
        /
        default: -

        Accessible label for the select content when a visible label is not present.

      • aria-labelled-by
        string
        /
        default: -

        References the ID of the element that labels the select content.

  • Item

    A selectable option within the select content. Manages selection state and keyboard navigation.

    • Attributes

      • disabled
        boolean
        /
        default: false

        When true, prevents the user from selecting this item.

      • value
        string
        /
        default: -

        The value associated with this item. This value will be submitted when used within a form.

Keyboard

  • Space

    When trigger is focused, opens the select. When an item is focused, selects it and closes the select.

  • Enter

    When trigger is focused, opens the select. When an item is focused, selects it and closes the select.

  • Opens the select when trigger is focused and focuses the first item. Moves focus to the next item in the list. If focus is on the last item, moves focus to the first item.

  • Opens the select when trigger is focused and focuses the last item. Moves focus to the previous item in the list. If focus is on the first item, moves focus to the last item.

  • Escape

    Closes the select and returns focus to the trigger element.

made for toddle