docs

Overview API Styling Examples

Imports

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

Basic usage

<tng-select
  [options]="workflowStages"
  [value]="selectedStage()"
  (valueChange)="onSelectedStageChange($event)"
  [getOptionValue]="getWorkflowStageValue"
  [getOptionLabel]="getWorkflowStageLabel"
  [isOptionDisabled]="isWorkflowStageDisabled"
  placeholder="Choose workflow stage"
  [labelId]="'workflow-stage-label'"
></tng-select>

Select variants

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

Workflow stage (Plain-CSS)

Workflow stage

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

Selected: In review

Behavior baseline

The wrapper exposes a controlled single-value model through value and valueChange.
The trigger owns the combobox semantics while the menu uses a roving active option inside a listbox.
Use content templates when you need richer selected-value or option-row markup without rebuilding the primitive shell.