Select
Displays a list of options for the user to pick from — triggered by a button.
About
The Select component is built using the ListKeyManager and Overlay from the Material CDK, providing a robust and accessible way to handle dropdown selections. It supports single and multiple selection, grouping, and custom templates for selected values.
Installation
Run the following command to install the select component:
Usage
To use the Select component, you need to import HlmSelectImports from @spartan-ng/helm/select and BrnSelectImports from @spartan-ng/brain/select.
Default
A standard single-selection dropdown.
Multiple Selection
Allows users to select multiple options from the list.
You can select multiple skills from the list.
Scrollable with Groups
Handles long lists with grouping and scroll buttons.
Value Template
Customize how the selected value is displayed in the trigger.
Custom View Template
API Reference
Brain API
The Brain components provide the core logic and accessibility for the select.
| Component / Directive | Selector | Description |
|---|---|---|
| BrnSelect | brn-select | The root select component managing state and overlays. |
| BrnSelectTrigger | brn-select-trigger | The trigger element that opens the select dropdown. |
| BrnSelectValue | brn-select-value | Displays the currently selected value(s). |
| BrnSelectContent | brn-select-content | The container for the selectable options. |
Helm API
| Component / Directive | Selector | Description |
|---|---|---|
| HlmSelect | hlm-select | The root select component. |
| HlmSelectTrigger | hlm-select-trigger | The button that toggles the dropdown. |
| HlmSelectContent | hlm-select-content | Container for the options. |
| HlmSelectOption | hlm-option | Individual selectable item. |