Open in Claude Open in ChatGPT

[ Installation ] 

npx wally-ui add combobox

[ Import ] 

import { Combobox } from './components/wally-ui/combobox/combobox';
import { ComboboxInput } from './components/wally-ui/combobox/combobox-input/combobox-input';
import { ComboboxTrigger } from './components/wally-ui/combobox/combobox-trigger/combobox-trigger';
import { ComboboxContent } from './components/wally-ui/combobox/combobox-content/combobox-content';
@Component({
  selector: 'app-example',
  imports: [
    Combobox,
    ComboboxInput,
    ComboboxTrigger,
    ComboboxContent
  ],
  templateUrl: './example.html'
})

[ Basic Usage ] 

<!-- Single select with input mode -->
<wally-combobox
  [data]="fruits"
  placeholder="Select a fruit..."
  (selectionChange)="onSelectionChange($event)">
  <wally-combobox-input></wally-combobox-input>
  <wally-combobox-content></wally-combobox-content>
</wally-combobox>

<!-- Display selected item -->
@if (selectedFruits.length > 0) {
  <p>Selected: {{ selectedFruits[0].label }}</p>
}
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.html'
})
export class ExampleComponent {
  fruits = [
    { value: 1, label: 'Apple', description: 'A sweet red fruit' },
    { value: 2, label: 'Banana', description: 'A yellow tropical fruit' },
    { value: 3, label: 'Orange', description: 'A citrus fruit' }
  ];

  selectedFruits: any[] = [];

  onSelectionChange(items: any[]): void {
    this.selectedFruits = items;
  }
}

[ Multi-Select ] 

<wally-combobox
  [data]="countries"
  [multiSelect]="true"
  [closeOnSelect]="false"
  (selectionChange)="onCountriesChange($event)">
  <wally-combobox-input></wally-combobox-input>
  <wally-combobox-content></wally-combobox-content>
</wally-combobox>

@if (selectedCountries.length > 0) {
  <p>{{ selectedCountries.length }} countries selected</p>
}
countries = [
  { value: 1, label: 'United States' },
  { value: 2, label: 'United Kingdom' },
  { value: 3, label: 'Brazil' }
];

selectedCountries: any[] = [];

onCountriesChange(items: any[]): void {
  this.selectedCountries = items;
}

[ Grouped Items ] 

<wally-combobox
  [data]="languages"
  groupBy="group"
  (selectionChange)="onLanguageChange($event)">
  <wally-combobox-input></wally-combobox-input>
  <wally-combobox-content></wally-combobox-content>
</wally-combobox>
languages = [
  { value: 1, label: 'JavaScript', group: 'Frontend' },
  { value: 2, label: 'TypeScript', group: 'Frontend' },
  { value: 3, label: 'Python', group: 'Backend' },
  { value: 4, label: 'Java', group: 'Backend' }
];

selectedLanguage: any[] = [];

onLanguageChange(items: any[]): void {
  this.selectedLanguage = items;
}

[ Custom Trigger ] 

<wally-combobox
  [data]="options"
  triggerMode="custom"
  (selectionChange)="onOptionChange($event)">
  <wally-combobox-trigger>
    <wally-button variant="outline">
      @if (selectedOption.length > 0) {
        {{ selectedOption[0].label }}
      } @else {
        Select an option
      }
    </wally-button>
  </wally-combobox-trigger>
  <wally-combobox-content></wally-combobox-content>
</wally-combobox>
options = [
  { value: 1, label: 'Option 1' },
  { value: 2, label: 'Option 2' },
  { value: 3, label: 'Option 3' }
];

selectedOption: any[] = [];

onOptionChange(items: any[]): void {
  this.selectedOption = items;
}

[ API Reference ]

Combobox Props & Events

PropertyTypeDefaultDescription
dataComboboxInterface[][]Array of items to display in the dropdown
multiSelectbooleanfalseEnable multi-select mode with chips
triggerMode'input' | 'custom''input'How the combobox is triggered - input field or custom trigger
groupBystring | nullnullProperty name to group items by (enables grouping with category headers)
placeholderstring'Search...'Placeholder text for the input field
closeOnSelectbooleantrueWhether to close dropdown after item selection
disabledbooleanfalseDisable the combobox
(selectionChange)OutputEmitterRef<ComboboxInterface[]>-Emitted when selection changes. Returns array of selected items

ComboboxContent Props

PropertyTypeDefaultDescription
position'top' | 'bottom''bottom'Preferred dropdown position. Auto-adjusts based on available viewport space

ComboboxInterface

PropertyTypeRequiredDescription
valueanyYesUnique identifier for the item
labelstringYesDisplay text for the item
descriptionstringNoOptional description text shown below the label
groupstringNoGroup name for categorizing items (used with groupBy prop)
[key: string]anyNoAdditional custom properties can be added

[ Keyboard Navigation ] 

Keyboard shortcuts:
- Arrow Down: Navigate to next item
- Arrow Up: Navigate to previous item
- Enter: Select focused item
- Escape: Close dropdown
- Backspace: Remove last chip (multi-select mode)

[ Features ]

  • Intelligent viewport-aware positioning (auto-adjusts based on available space)
  • Real-time position recalculation on window resize
  • Multi-select with chips inside input
  • Integrated search/filter functionality
  • Complete keyboard navigation support
  • Item grouping with category headers
  • Virtual scrolling for large datasets (1000+ items)
  • Dark mode supported
  • Click outside to close
  • Zero external dependencies (Tailwind only)