A shadcn/ui inspired Blazor component library

Installation

Add the Combobox component using the CLI:

shadcnblazor component add combobox

Features

Real-time text filtering as you type

Controlled (@bind-Value, ValueChanged)

Two option modes: Items or declarative children

Keyboard navigation (arrows, Enter, Escape, Tab)

ARIA-compliant combobox/listbox semantics (aria-autocomplete="list")

Disabled support (trigger + per-item)

"No results" empty state

Placeholder + selected-value display

View Source

Examples

Usage

The Combobox is a searchable single-select dropdown. Type to filter the list in real time. Use @bind-Value for two-way binding. Provide options via Items or declarative children. Requires PopoverProvider in your layout.

Selected: none

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

@using ShadcnBlazor.Components.Combobox
@using ShadcnBlazor.Components.Select

<div class="flex flex-col gap-4 w-64">
    <Combobox T="string"
              Label="Framework"
              @bind-Value="_value"
              Items="@_options"
              Placeholder="Search frameworks..." />

    <p class="text-sm text-muted-foreground">
        Selected: <span class="font-medium text-foreground">@(_value ?? "none")</span>
    </p>
</div>

@code {
    private string? _value;

    private readonly SelectOption<string>[] _options =
    [
        new("blazor", ".NET / Blazor"),
        new("react", "React"),
        new("svelte", "Svelte"),
        new("vue", "Vue"),
        new("angular", "Angular"),
        new("solid", "SolidJS"),
        new("qwik", "Qwik (Disabled)", Disabled: true),
    ];
}

Declarative

Use SelectItem, SelectLabel, SelectSeparator, and SelectGroup as child content for inline option declaration. When search text is active, labels and separators are hidden so the filtered results are clean.

Selected: none

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

@using ShadcnBlazor.Components.Combobox
@using ShadcnBlazor.Components.Select

<div class="flex flex-col gap-4 w-64">
    <Combobox T="string"
              Label="Country"
              @bind-Value="_value"
              Placeholder="Search countries..."
              MaxVisibleItems="6">
        <SelectGroup>
            <SelectLabel Text="Americas" />
            <SelectItem Value='@("us")' Text="United States" />
            <SelectItem Value='@("ca")' Text="Canada" />
            <SelectItem Value='@("mx")' Text="Mexico" />

            <SelectSeparator />

            <SelectLabel Text="Europe" />
            <SelectItem Value='@("gb")' Text="United Kingdom" />
            <SelectItem Value='@("de")' Text="Germany" />
            <SelectItem Value='@("fr")' Text="France" />
            <SelectItem Value='@("es")' Text="Spain" />
        </SelectGroup>
    </Combobox>

    <p class="text-sm text-muted-foreground">
        Selected: <span class="font-medium text-foreground">@(_value ?? "none")</span>
    </p>
</div>

@code {
    private string? _value;
}

API Reference

Combobox`1

Searchable dropdown that lets the user filter and pick a single value.

Properties

Name	Type	Description
`AdditionalAttributes`	`Dictionary<string, Object>`
`ChildContent`	`RenderFragment`
`Class`	`string`
`Disabled`	`bool`
`Items`	`IEnumerable<SelectOption<T>>`
`Label`	`string`	Optional label shown at the top of the dropdown and used as the trigger aria-label.
`LockScroll`	`bool`	When true, body scroll is locked while the popover is open.
`MaxVisibleItems`	`Nullable<int>`
`Placeholder`	`string`	Placeholder text shown when no value is selected.
`PopoverFitContent`	`bool`	When true, the popover expands to fit option content instead of matching trigger width.
`RenderItem`	`RenderFragment<SelectOption<T>>`
`Size`	`Size`	Size variant applied to the trigger input.
`TriggerClass`	`string`	Additional CSS classes applied to the trigger input element.
`Value`	`T`	Currently selected value.
`ValueChanged`	`EventCallback<T>`	Callback invoked when the selected value changes.

Events

Name	Type	Description
`ValueChanged`	`EventCallback<T>`	Callback invoked when the selected value changes.

Methods

Method	Returns	Description
`DisposeAsync`	`ValueTask`
`Equals`	`bool`
`GetHashCode`	`int`
`GetType`	`Type`
`SetParametersAsync`	`Task`
`ToString`	`string`

Mobile support for API reference coming soon.