Select

A button that shows the title of the chosen option and opens the options in a list below it, or above it when the list fits only there, at least as wide as the button and lined up with its start. The list is at most 10.5 rows high, and never taller than the larger room below or above the button in the window; it scrolls the rest, with the chosen option in view, and it never opens beside the button. The owner holds the value: choosing an option emits its value, and the button shows the new one once the owner binds it. Escape hides an option's tooltip while one shows, and otherwise, like Tab, closes the list and returns focus to the button, as does choosing; a click outside closes it.

Examples

Loading…

States

Loading…

API

Selector nol-select

Import from @noldova/ui.components.angular

Inputs

Name	Type	Default	Description
`options`	`readonly (SelectOption \| SelectGroup)[]`	Required	The options in the order the list shows them, each with a distinct value across the whole list, and the labeled groups, a `SelectGroup` each, that hold some of them, in their place among the rest. A group shows its label above its options, muted and starting where their titles start, and screen readers read its options as a group named by the label; the label takes no focus, and the arrow keys and type-ahead move across the groups' options as across any. An option that is disabled, `SelectOption.isDisabled`, shows but can't be chosen.
`value`	`string`	Required	The value of the chosen option. The button shows that option's title, or the value itself when no option has it.
`label`	`string`	Required	The accessible name of the button and the list; the button's name also includes the title it shows, then the chosen option's tag, if it has one.
`describedBy`	`string \| null`	`null`	The id, or space-separated ids, of the elements that describe the button, such as a setting's description and its `FieldMessageComponent`; nothing describes it when null, the default.
`disabled`	`boolean`	`false`	Whether the button is disabled; false when not bound.

Outputs

Name	Type	Description
`valueChange`	`string`	Emits the value of the option the person chose when it differs from `SelectComponent.value`; choosing the current option only closes the list.

Accessibility

Key	Action
`Tab`	Moves the focus to the select's button, or past it; in the open list, closes it and gives the focus back to the button.
`Enter`	On the button, opens the list; in the list, picks the active option and closes the list.
`Space`	On the button, opens the list; in the list, picks the active option and closes the list.
`Arrow Down`	In the list, makes the next option that can be chosen the active one.
`Arrow Up`	In the list, makes the previous option that can be chosen the active one.
`Home`	In the list, makes the first option that can be chosen the active one.
`End`	In the list, makes the last option that can be chosen the active one.
`A letter`	In the list, makes the next option whose title starts with what was typed the active one.
`Escape`	Closes the list and gives the focus back to the button.

The select is a native button marked aria-haspopup="listbox" that reports aria-expanded; its name joins the label, the chosen option's title and its tag, so it is read with its value.

The list it opens has the listbox role and is named by the label; each choice has the option role, the chosen one is marked aria-selected, and the active one is followed with aria-activedescendant while the focus stays on the list.

Options given in a SelectGroup sit in an element with the group role, named by the group's label; a disabled option is marked aria-disabled, and the keys pass over it.

describedBy names an element, such as a field message, in the button's aria-describedby.

Specification

Loading…