useSelect

import { useSelect } from '@primereact/headless/select';

const select = useSelect({ options: cities, optionLabel: 'name' });
const { rootProps, triggerProps, listProps, positionerProps, popupProps, arrowProps, state, listbox } = select;

const [selected, setSelected] = React.useState(null);
 
const select = useSelect({
    value: selected,
    onValueChange: (e) => setSelected(e.value)
});
 
<div {...rootProps}>
    <button {...triggerProps}></button>
    <div {...positionerProps}>
        <div {...popupProps}>
            <ul {...listProps}></ul>
        </div>
        <div {...arrowProps} />
    </div>
</div>;

const [open, setOpen] = React.useState(false);
 
const select = useSelect({
    options: cities,
    optionLabel: 'name',
    open,
    onOpenChange: (e) => setOpen(e.value)
});

const [filterValue, setFilterValue] = React.useState('');
 
const select = useSelect({
    options: cities,
    optionLabel: 'name',
    filterValue,
    onFilterValueChange: (e) => setFilterValue(e.query)
});
 
<input {...select.filterProps} placeholder="Search..." />;

const select = useSelect({
    options: groupedCities,
    optionLabel: 'label',
    optionValue: 'code',
    optionDisabled: 'inactive',
    optionKey: 'code',
    optionGroupLabel: 'label',
    optionGroupChildren: 'items'
});

const select = useSelect({ multiple: true, metaKeySelection: true });

[data-scope='select'][data-part='trigger']:focus-visible {
    outline: 2px solid var(--p-primary-color);
    outline-offset: -2px;
}
 
[data-scope='select'][data-part='indicator'][data-open] {
    transform: rotate(180deg);
}
 
[data-scope='select'][data-part='popup'][data-open] {
    border: 1px solid var(--p-content-border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
}
 
[data-scope='listbox'][data-part='option'][data-focused] {
    background: var(--p-surface-100);
}
 
[data-scope='listbox'][data-part='option'][data-selected] {
    background: var(--p-primary-color);
    color: var(--p-primary-contrast-color);
}