@styloviz/select-dropdown

Accessible select / dropdown with search, multi-select and custom option templates.

Part of the Styloviz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/select-dropdown

Requires @angular/core and @angular/common >= 21. Self-contained — no other Styloviz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvSelectDropdownComponent } from '@styloviz/select-dropdown';

@Component({
  standalone: true,
  imports: [SvSelectDropdownComponent],
  template: `
    <sv-select-dropdown />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | value | string \| string[] (two-way) | '' | Selected value(s) — string for single, string[] for multiple (two-way). | | options | SelectOption[] | [] | Flat list of options. Use groups instead for sectioned lists. | | groups | SelectGroup[] | [] | Grouped options with section labels. | | size | SelectSize | 'md' | Field size: sm, md or lg. | | variant | SelectVariant | 'default' | Visual variant. | | placeholder | string | 'Select an option' | Placeholder shown when nothing is selected. | | label | string | '' | Field label. | | hint | string | '' | Helper text shown below the field. | | errorMessage | string | '' | Error message; puts the field in an error state when set. | | multiple | boolean | false | Allow selecting multiple options. | | searchable | boolean | false | Show a search box to filter options. | | searchPlaceholder | string | 'Search…' | Placeholder for the search box. | | noResultsText | string | 'No results found' | Text shown when a search yields no matches. | | clearable | boolean | false | Show a clear (×) control. | | disabled | boolean | false | Disable the field. | | loading | boolean | false | Show a loading state. | | required | boolean | false | Mark the field as required. | | optionalTag | boolean | false | Show an "optional" tag next to the label. | | maxSelected | number | 0 | Max selectable options in multiple mode (0 = unlimited). | | inputId | string | '' | Explicit id for the control (for external ). | | ariaLabel | string | '' | Accessible name for the trigger when there is no visible label. Use this instead of a native aria-label on the host element (which is not a labelable role and would be an ARIA violation). Falls back to the placeholder so the combobox always has an accessible name. | | customClass | string | '' | Extra CSS classes for the control. |

Outputs

| Output | Type | Description | | --- | --- | --- | | selectionChange | string \| string[] | Emitted with the new selection (string or string[]). | | dropdownOpen | void | Emitted when the dropdown opens. | | dropdownClose | void | Emitted when the dropdown closes. | | searchChange | string | Emitted with the search query whenever it changes (for remote filtering). |

Documentation

Full API reference and live demos: https://styloviz.dev/docs

License

MIT