docs

Overview API Styling Examples

Imports

import { TngMultiSelectComponent } from '@tailng-ui/components';

Basic usage

<tng-multiselect
  [options]="planets"
  [value]="selectedPlanets()"
  (valueChange)="onValueChange($event)"
  [getOptionValue]="getPlanetValue"
  [getOptionLabel]="getPlanetLabel"
  placeholder="Select planets"
></tng-multiselect>

MultiSelect variants

The wrapper API stays the same across plain CSS and Tailwind shells.

Planet picker (Plain-CSS)

Planet picker

Wrapper-first multi-selection with a light shell and a committed value summary.

Selected: Earth, Mars, Neptune

Behavior baseline

tngMultiSelect models values as readonly T[].
Enter toggles the active option without closing the overlay.
Trigger and overlay contracts reuse shared select parts for consistent styling.
Option state hooks are exposed through data-active, data-selected, and data-disabled.