Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7
Overview API Styling Examples

ListBox overview

TailNG ships <tng-listbox> as the owned always-open selection surface. It keeps the listbox primitive keyboard contract, but component-driven apps can now hand options in as data instead of authoring every option node manually.

Imports

Component import

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

Usage baseline

Wrapper usage

html
<tng-listbox
  ariaLabel="Capability checklist"
  [multiple]="true"
  [options]="capabilityOptions"
  [value]="selectedCapabilities()"
  (valueChange)="onSelectedCapabilitiesChange($event)"
></tng-listbox>

Style variants

The same <tng-listbox> contract can sit inside a plain CSS shell or a Tailwind shell without changing the API.

Capability checklist (Plain-CSS)

selected: Components integration

Behavior baseline

  • Arrow keys drive active option roving inside the focused listbox.
  • Space toggles active selection and Enter commits selection.
  • Typeahead is enabled by default for printable keys.
  • Common option shapes like id/label/description work without custom accessors.