Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

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.

Select API

Inputs

NameDescription
idUnique identifier for the select component.
placeholderPlaceholder text to display when no value is selected.
disabledWhether the select is disabled.
requiredWhether the select is required.
multipleWhether the user can select multiple options.
hideCheckIconWhether to hide the check icon for selected options.
ariaLabelAria-label for the select.
tabIndexTabIndex for the select.
aria-describedbyAria-describedby for the select.

Outputs

NameDescription
selectionChangeEvent emitted when the selected value changes.
openedEvent emitted when the select panel is opened.
closedEvent emitted when the select panel is closed.