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.

Basic Select

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

Basic mat-select

Favorite food

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.

Toppings

Select with search feature

Add search inside the panel when a predefined option list is long enough to need local filtering.

Favorite food