Select - allows the user to select one or more values from a predefined list.

When a value is selected once, the reset control is hidden. Its display can be enabled separately.

Use search when the list has more than 10 items.

Search can be by first character or full match, depending on the specific task and user preferences.

If additional controls need to be arranged, you can enable the display of a footer. You can display various auxiliary controls in the footer: buttons, links, tooltips.

By default, the maximum height of the list is 256px. When there are many selections in the select-footer, the drop-down menu will appear scrolling.

You can customize the height if needed. For example, in a normal menu, 7-8 items are visible. If there are 10 options to choose from, you can increase the height of the list and show all the items without hiding a small part under the scroll.

The width of the select matches the select by default and expands if the list contains long text.

The select panel has a default min-width of 200px to align nicely with narrow selects. You can customize this by setting the panelMinWidth attribute with a numeric value.

To set the minimum width of select panel for all selects within a module that share common display rules, you can use the kbqSelectOptionsProvider.

import { kbqSelectOptionsProvider } from '@koobiq/components/select';

@NgModule({
    providers: [
        kbqSelectOptionsProvider({ panelMinWidth: 350 })
    ]
})

If needed, the select width can be set to match the select width exactly. To do this, use the panelWidth attribute with the value auto.

To set a fixed width of 400px for the select, use the panelWidth attribute with the value 400.

To configure the select width for all selects within a module according to unified display rules, use the kbqSelectOptionsProvider.

import { kbqSelectOptionsProvider } from '@koobiq/components/select';

@NgModule({
    providers: [
        kbqSelectOptionsProvider({ panelWidth: 'auto' })
    ]
})

You can configure a select so that the search is disabled when there is a small number of options. By default, this feature is turned off. Use the searchMinOptionsThreshold attribute to configure it.

Possible values:

• 'auto' – disables search if the number of options is less than 10 (default behavior).
• <number> – disables search if the number of options is less than the specified number.

To configure search disabling for all selects in a module with consistent display rules, you can use the kbqSelectOptionsProvider provider:

import { kbqSelectOptionsProvider } from '@koobiq/components/select';

@NgModule({
    providers: [
        kbqSelectOptionsProvider({ minOptionsThreshold: 'auto' })
    ]
})

The select can contain preselected values.

To make navigation easier, selected items can be pinned to the top of the list.

Add cdk-virtual-scroll-viewport to your component template to display only visible elements and improve performance.

By default, the dropdown menu is hidden beneath the horizontal Navbar and Topbar in other cases, it appears above adjacent elements.

To prevent the menu from overlapping a required element during scrolling and instead have it hidden beneath it, adjust its position using a custom z-index or offset parameters.

• If you are using a select without a label, we suggest adding a placeholder to indicate what information the user should select. For example, “Country.”
• If there are more than 10 items in the list of values, then enable the search display in the select header. This will make it easier to find values.