shadcn-templ 2.0 beta. Switch to templUI v1
1.7k
New

Combobox

Previous Next

Autocomplete input with a list of suggestions.

package examples import "github.com/axadrn/shadcn-templ/v2/components/combobox"

Installation

shadcn-templ add combobox

Usage

import "github.com/axadrn/shadcn-templ/v2/components/combobox"
@combobox.Combobox() {	@combobox.Input(combobox.InputProps{Placeholder: "Select a framework"})	@combobox.Content() {		@combobox.Empty() {			No items found.		}		@combobox.List() {			@combobox.Item(combobox.ItemProps{Value: "templ"}) {				templ			}			@combobox.Item(combobox.ItemProps{Value: "htmx"}) {				htmx			}		}	}}

Composition

Simple

A single-line input and a flat list (see Basic).

combobox.Combobox├── combobox.Input└── combobox.Content    ├── combobox.Empty    └── combobox.List        ├── combobox.Item        └── combobox.Item

With chips

Multi-select with Multiple, chips, and a chips input (see Multiple).

combobox.Combobox├── combobox.Chips│   ├── combobox.Value│   │   └── combobox.Chip│   └── combobox.ChipsInput└── combobox.Content    ├── combobox.Empty    └── combobox.List        ├── combobox.Item        └── combobox.Item

With groups

Nested items per group, with a separator between groups (see Groups).

combobox.Combobox├── combobox.Input└── combobox.Content    ├── combobox.Empty    └── combobox.List        ├── combobox.Group        │   ├── combobox.Label        │   ├── combobox.Item        │   └── combobox.Item        ├── combobox.Separator        └── combobox.Group            ├── combobox.Label            ├── combobox.Item            └── combobox.Item

Custom Items

Use the Label prop when the text shown in the input differs from the item’s value.

@combobox.Combobox() {	@combobox.Input(combobox.InputProps{Placeholder: "Select a framework"})	@combobox.Content() {		@combobox.Empty() {			No items found.		}		@combobox.List() {			@combobox.Item(combobox.ItemProps{Value: "next", Label: "Next.js"}) {				Next.js			}			@combobox.Item(combobox.ItemProps{Value: "sveltekit", Label: "SvelteKit"}) {				SvelteKit			}		}	}}

Multiple Selection

Use Multiple with chips for multi-select behavior.

@combobox.Combobox(combobox.Props{Multiple: true}) {	@combobox.Chips() {		@combobox.Value()		@combobox.ChipsInput(combobox.ChipsInputProps{Placeholder: "Add framework"})	}	@combobox.Content() {		@combobox.Empty() {			No items found.		}		@combobox.List() {			@combobox.Item(combobox.ItemProps{Value: "templ"}) {				templ			}			@combobox.Item(combobox.ItemProps{Value: "htmx"}) {				htmx			}		}	}}

Basic

A simple combobox with a list of frameworks.

package examples import "github.com/axadrn/shadcn-templ/v2/components/combobox"

Multiple

A combobox with multiple selection using Multiple and combobox.Chips.

templ 
package examples import "github.com/axadrn/shadcn-templ/v2/components/combobox"

Clear Button

Use the ShowClear prop to show a clear button.

package examples import "github.com/axadrn/shadcn-templ/v2/components/combobox"

Groups

Use combobox.Group and combobox.Separator to group items.

package examples import "github.com/axadrn/shadcn-templ/v2/components/combobox"

Custom Items

You can render a custom component inside combobox.Item.

package examples import (

Invalid

Use aria-invalid on combobox.Input to make the combobox invalid.

package examples import "github.com/axadrn/shadcn-templ/v2/components/combobox"

Disabled

Use the Disabled prop to disable the combobox.

package examples import "github.com/axadrn/shadcn-templ/v2/components/combobox"

Auto Highlight

Use the AutoHighlight prop to automatically highlight the first item on filter.

package examples import "github.com/axadrn/shadcn-templ/v2/components/combobox"

You can trigger the combobox from a button or any other component by using the combobox.Trigger attributes. Move the combobox.Input inside the combobox.Content.

package examples import (

Input Group

You can add an addon to the combobox by using the inputgroup.Addon component inside the combobox.Input.

package examples import (

API Reference

Combobox

The Combobox component is the root that manages filtering, selection and the form value.

Prop Type Default
Name string -
Value string -
Values []string -
Multiple bool false
AutoHighlight bool false
Disabled bool false

Input

The combobox.Input component is the text input that filters the list.

Prop Type Default
Placeholder string -
HideTrigger bool false
ShowClear bool false
Class string -

Content

The combobox.Content component is the popup that holds the list.

Prop Type Default
Side SideTop | SideRight | SideBottom | SideLeft SideBottom
Align AlignStart | AlignCenter | AlignEnd AlignStart
SideOffset int 6
AlignOffset int 0
Class string -

List

The combobox.List component holds the filterable items.

Prop Type Default
Class string -

Empty

The combobox.Empty component shows while no item matches the filter.

Prop Type Default
Class string -

Group

The combobox.Group component wraps related items.

Prop Type Default
Class string -

Label

The combobox.Label component titles a group.

Prop Type Default
Class string -

Item

The combobox.Item component is a selectable option.

Prop Type Default
Value string -
Label string -
Disabled bool false
Class string -

Separator

The combobox.Separator component divides groups.

Prop Type Default
Class string -

Chips

The combobox.Chips component is the chip container and popup anchor in multiple mode, composed with Value and ChipsInput.

Prop Type Default
Class string -

Chip

The combobox.Chip component renders one selected value as a removable chip, rendered by Value in multiple mode.

Prop Type Default
Value string -
HideRemove bool false
Class string -

ChipsInput

The combobox.ChipsInput component is the inline filter input rendered after the chips.

Prop Type Default
Placeholder string -
Class string -

Value

The combobox.Value component renders the current selection: the selected chips in multiple mode, or the selected item’s label inside a button trigger (see Popup).

Prop Type Default
Placeholder string -
Class string -
CollapsibleCommand