The select is a button that opens a list of options. Give it options, an array of NuiOption, and bind [(value)], or [(values)] with multiple. It works with Signal Forms, reactive forms and ngModel too.

Options can have a group, a description and keywords, and children make the list a tree. Past 200 rows only the rows in view are rendered, so 100,000 options open as fast as ten.

To type and filter instead, use the combobox.

Groups

Options with a group are listed under its heading. Typing a letter jumps to the next option that starts with it.

Chosen: it. Type “s” to jump to Spain, again for Switzerland.

Many at once

multiple keeps the list open and binds [(values)]. selectAll adds a button that picks or clears every option. Disabled options can’t be picked.

2 toppings. The list stays open while you pick.

Tree

Options with children make a tree. The list opens with the chosen option’s folders expanded.

Chosen: website/pages. → opens a folder and ← closes it.

Long lists

Every time zone, by region. Past 200 rows only the rows in view are rendered, and the active option stays rendered for screen readers.

About 400 options, but only the rows in view are rendered.