Select

Select lets users choose one or multiple values from a known dropdown list. Use it in one ngs-form-field for forms, filters, settings, table filters, and admin configuration fields when the available options are predefined.

Use ngs-select with ngs-option for each option and ngs-optgroup when options need visible grouping. Select supports placeholder, required and disabled states, single and multiple selection, Angular forms, value, selectionChange, custom trigger content, and optional header, body, and footer slots for richer dropdown panels.

Do not use Select as a command menu, action list, route navigation, compact mode switch, simple visible radio group, rich card choice, or free text search input. Use Menu, Navigation, Tabs, Segmented, Radio, RadioCard, or Autocomplete when those match the job better. Use dedicated selectors such as CountrySelect, CurrencySelect, DateFormatSelect, or TimezoneSelect when the domain already has its own component.

The NgStarter Angular Select component lets you let users choose one or multiple values from a known dropdown list. Use ngs-select inside one ngs-form-field when a form, filter, setting, table filter, DataView filter, or admin configuration field should choose from predefined options. It includes examples for Basic Select, Getting and setting the select value, Form Field Features, and Disabled.

Keyboard access

Tab or Shift+Tab focuses the Select without opening its list. Enter, Space, or an arrow key opens the list; Up and Down move through available options, and Home and End move to the first and last option. Typing letters finds an option by its label. Enter or Space selects the active option. Multiple selection keeps the list open so that more options can be toggled. Escape closes without changing the value; Tab closes and continues to the next control. Disabled and hidden options are skipped.

Search inputs inside the panel keep normal text editing, including Space, Home, and End. Use Up and Down to navigate search results and Enter to select. Options loaded or filtered while the panel is open participate in the same keyboard navigation.

Opening with a mouse click does not activate or highlight an option. Arrow keys start keyboard navigation when needed; existing checked or selected values remain selected.

Basic Select

Use a basic Select when the user chooses one value from a short predefined dropdown list.

Basic ngs-select

Favorite food

Clearable Select

Add clearable when the user should be able to remove the current selection from the trigger.

Status

Getting and setting the select value

Bind the selected value when application state or another control needs to read or set the selection.

Select an option

You selected: option2

Form Field Features

Place one Select inside one FormField when it needs a label, hint, required state, or validation error.

Favorite animal

Disabled

Disable Select when the current state should be visible but the value cannot be changed.

Disable select

Choose an option

Resetting the select value

Reset the control when the user should be able to clear a previously selected value.

State

Groups of Options

Use option groups when the dropdown contains related categories that should stay in one control.

Pokemon

Multiple Selection

Use multiple selection when the field stores an array of selected values from the same option list.

Toppings

Customizing the trigger label

Use a custom trigger when the closed Select must summarize selected values differently from option text.