Combobox

A combobox is an autocomplete input and command palette with a list of suggestions. The Combobox is built using a composition of the <Popover /> and the <Command /> components.

PreviousNext
Loading...

Installation

1

Run the CLI

Use the CLI to add the component to your project.

Loading...
1

Add the component files

Create the component directory structure and add the following files to your project.

Loading...

Examples

default

import { Component } from '@angular/core';
 
import { ZardComboboxComponent, type ZardComboboxOption } from '../combobox.component';
 
@Component({
  selector: 'zard-demo-combobox-default',
  imports: [ZardComboboxComponent],
  standalone: true,
  template: `
    <z-combobox
      [options]="frameworks"
      class="w-[200px]"
      placeholder="Select framework..."
      searchPlaceholder="Search framework..."
      emptyText="No framework found."
      (zComboSelected)="onSelect($event)"
    />
  `,
})
export class ZardDemoComboboxDefaultComponent {
  frameworks: ZardComboboxOption[] = [
    { value: 'angular', label: 'Angular' },
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue.js' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'ember', label: 'Ember.js' },
    { value: 'nextjs', label: 'Next.js' },
  ];
 
  onSelect(option: ZardComboboxOption) {
    console.log('Selected:', option);
  }
}

grouped

import { Component } from '@angular/core';
 
import { ZardComboboxComponent, type ZardComboboxGroup, type ZardComboboxOption } from '../combobox.component';
 
@Component({
  selector: 'zard-demo-combobox-grouped',
  imports: [ZardComboboxComponent],
  standalone: true,
  template: `
    <z-combobox
      [groups]="techGroups"
      placeholder="Select technology..."
      searchPlaceholder="Search technology..."
      emptyText="No technology found."
      (zComboSelected)="onSelect($event)"
    />
  `,
})
export class ZardDemoComboboxGroupedComponent {
  techGroups: ZardComboboxGroup[] = [
    {
      label: 'Frontend Frameworks',
      options: [
        { value: 'angular', label: 'Angular' },
        { value: 'react', label: 'React' },
        { value: 'vue', label: 'Vue.js' },
        { value: 'svelte', label: 'Svelte' },
      ],
    },
    {
      label: 'Backend Frameworks',
      options: [
        { value: 'nestjs', label: 'NestJS' },
        { value: 'express', label: 'Express' },
        { value: 'fastify', label: 'Fastify' },
        { value: 'koa', label: 'Koa' },
      ],
    },
    {
      label: 'Full-Stack Frameworks',
      options: [
        { value: 'nextjs', label: 'Next.js' },
        { value: 'nuxtjs', label: 'Nuxt.js' },
        { value: 'remix', label: 'Remix' },
        { value: 'sveltekit', label: 'SvelteKit' },
      ],
    },
  ];
 
  onSelect(option: ZardComboboxOption) {
    console.log('Selected:', option);
  }
}

disabled

import { Component } from '@angular/core';
 
import { ZardComboboxComponent, type ZardComboboxOption } from '../combobox.component';
 
@Component({
  selector: 'zard-demo-combobox-disabled',
  imports: [ZardComboboxComponent],
  standalone: true,
  template: `
    <div class="flex gap-4">
      <z-combobox [options]="frameworks" placeholder="Disabled combobox" [disabled]="true" />
 
      <z-combobox
        [options]="frameworksWithDisabled"
        placeholder="Select framework..."
        searchPlaceholder="Search framework..."
        emptyText="No framework found."
      />
    </div>
  `,
})
export class ZardDemoComboboxDisabledComponent {
  frameworks: ZardComboboxOption[] = [
    { value: 'angular', label: 'Angular' },
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue.js' },
  ];
 
  frameworksWithDisabled: ZardComboboxOption[] = [
    { value: 'angular', label: 'Angular' },
    { value: 'react', label: 'React', disabled: true },
    { value: 'vue', label: 'Vue.js' },
    { value: 'svelte', label: 'Svelte', disabled: true },
    { value: 'ember', label: 'Ember.js' },
  ];
}

form

Current value: None
Loading...

API

Property Type Default Description
class ClassValue '' Additional CSS classes
buttonVariant 'default' | 'outline' | 'secondary' | 'ghost' 'outline' Button variant style
zWidth 'default' | 'sm' | 'md' | 'lg' | 'full' 'default' Width of the combobox
placeholder string 'Select...' Placeholder text when no value is selected
searchPlaceholder string 'Search...' Placeholder for the search input
emptyText string 'No results found.' Text shown when no options match the search
disabled boolean false Whether the combobox is disabled
searchable boolean true Whether to show the search input
value string | null null The selected value
options ZardComboboxOption[] [] Array of options (for flat list)
groups ZardComboboxGroup[] [] Array of grouped options
ariaLabel string '' ARIA label for accessibility
ariaDescribedBy string '' ARIA described-by for accessibility

Outputs

Event Type Description
zValueChange output<string | null> Emitted when the value changes
zComboSelected output<ZardComboboxOption> Emitted when an option is selected