useSelect

import { useSelect } from '@primereact/headless/select';
 
const select = useSelect({ options: cities, optionLabel: 'name' });
const { rootProps, triggerProps, listProps, positionerProps, popupProps, arrowProps, state, listbox } = select;
 
return (
    <div {...rootProps}>
        <button {...triggerProps}></button>
        <div {...positionerProps}>
            <div {...popupProps}>
                <ul {...listProps}></ul>
            </div>
            <div {...arrowProps} />
        </div>
    </div>
);

const select = useSelect({ defaultValue: 'NY' });

const [selected, setSelected] = React.useState(null);
 
const select = useSelect({
    value: selected,
    onValueChange: (e) => setSelected(e.value)
});

const select = useSelect({
    options: cities,
    optionLabel: 'name',
    optionValue: 'code',
    optionDisabled: 'inactive',
    optionKey: 'code'
});

const select = useSelect({
    options: groupedCities,
    optionLabel: 'label',
    optionGroupLabel: 'label',
    optionGroupChildren: 'items'
});

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

const select = useSelect({ autoOptionFocus: true, selectOnFocus: true });

const select = useSelect({ disabled: true });

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

const select = useSelect({ closeOnEscape: true, autoFocus: true, trapped: true });

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({ metaKeySelection: true });

const select = useSelect({ locale: 'tr-TR' });

/* Trigger focus ring */
[data-scope='select'][data-part='trigger']:focus-visible {
    outline: 2px solid var(--p-primary-color);
    outline-offset: -2px;
}
 
/* Open/close indicator rotation */
[data-scope='select'][data-part='indicator'][data-open] {
    transform: rotate(180deg);
}
 
/* Popup entrance */
[data-scope='select'][data-part='popup'][data-open] {
    border: 1px solid var(--p-content-border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
 
/* Option states */
[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);
}
[data-scope='listbox'][data-part='option'][data-disabled] {
    opacity: 0.5;
    pointer-events: none;
}