form

Combobox

Autocomplete input and command palette with a list of suggestions.

Preview

A preview of the Combobox component with interactive controls.

Preview Code
Interactive

Installation

Add the Combobox component to your project.

Bash
ng g @ng-cn/core:c combobox

Usage

Import and use the Combobox component in your Angular application.

Template TypeScript
template.html
<Combobox [(value)]="value" class="w-[200px]">
  <ComboboxTrigger placeholder="Select framework..." />
  <ComboboxContent>
    <ComboboxItem value="next">Next.js</ComboboxItem>
    <ComboboxItem value="sveltekit">SvelteKit</ComboboxItem>
    <ComboboxItem value="nuxt">Nuxt.js</ComboboxItem>
    <ComboboxItem value="remix">Remix</ComboboxItem>
    <ComboboxItem value="angular">Angular</ComboboxItem>
  </ComboboxContent>
</Combobox>

Examples

Explore different variations and use cases for the Combobox component.

Basic

Preview Code
Interactive

API Reference

Props
Prop Type Default Description
value string — The selected value.
placeholder string — Placeholder text when no option is selected.
class string — Additional CSS classes to apply.