Select

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

Обязательным параметром является только items. Для controlled-варианта передавайте value и onChange, для интеграции с формой используйте name и при необходимости defaultValue.

Множественный выбор включается через multiselect. В single-режиме value имеет тип string, в multiselect-режиме string[].

В single-режиме можно использовать mode="radio", если нужно запретить снятие выбора повторным кликом. В multiselect-режиме доступны selectAllOptions и isTargetAmount.

Select поддерживает два вида target-элемента: textfield-like по умолчанию и button-like. Для кастомизации доступны:

renderValue для текста выбранного значения;
renderTarget для полного переопределения target;
renderItem и renderSelectionIcon для отображения элементов списка;
beforeList, afterList и emptyStateDescription для содержимого выпадающего списка.

Внутри items можно передавать вложенные элементы. Базовый формат:

type Items = Array<{
    /**
     * Значение item.
     */
    value: string;
    /**
     * Метка-подпись к item.
     */
    label: string;
    /**
     * Сторона открытия вложенного списка относительно текущего элемента.
     * @default right
     */
    placement?: SelectPlacement | Array<SelectPlacementBasic>;
    /**
     * Список дочерних items.
     */
    items?: Array<ItemOption>;
    /**
     * Item не активен.
     */
    disabled?: boolean;
    /**
     * Слот для контента слева.
     */
    contentLeft?: ReactNode;
    /**
     * Слот для контента справа.
     */
    contentRight?: ReactNode;
    /**
     * Classname для item.
     */
    className?: string;
    /**
     * Максимальная высота дочернего выпадающего списка.
     */
    listMaxHeight?: CSSProperties['height'];
}>;

Примеры

В режиме textfield-like target внешне мимикрирует под компонент TextField и наследует все его свойства.

Live Editor

Result

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

Примеры​

Взаимодействие с disabled-элементами​

Использование с React Hook Form и нативной формой​

Поиск совпадений с функцией подсветки символов​

Клавиатурная навигация​

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

Примеры

Взаимодействие с disabled-элементами

Использование с React Hook Form и нативной формой

Поиск совпадений с функцией подсветки символов

Клавиатурная навигация