A shadcn/ui inspired Blazor component library

Installation

Add the Select component using the CLI:

shadcnblazor component add select

Features

Custom rendering (RenderItem) and sizing/layout options (Size, PopoverFitContent, MaxVisibleItems)

Controlled/uncontrolled (@bind-Value, ValueChanged)

Two option modes: Items or declarative children

Full keyboard support (arrows, Home/End, PageUp/PageDown, Enter/Escape, Tab)

ARIA-compliant combobox/listbox/option semantics

Disabled support (select + per-item)

Typeahead support (single-character jump)

Placeholder + selected value display

View Source

Examples

Usage

The Select component displays a dropdown for choosing a single value from a list. Use Value and ValueChanged (or @bind-Value) for two-way binding. Provide Items as a collection of SelectOption<T>. Use new SelectOption<T>(value, text, Disabled: true) to disable individual items. Requires PopoverProvider in your layout (already present in the docs).

1

2

3

4

5

6

7

8

9

10

11

12

13

<Select T="string" Label="Model" @bind-Value="_model" Items="@_modelOptions" Placeholder="Select a model" />

@code {
    private string? _model = "sonnet";

    private readonly SelectOption<string>[] _modelOptions =
    [
        new("sonnet", "Sonnet 4.5"),
        new("opus", "Opus 4"),
        new("haiku", "Haiku 4"),
        new("claude", "Claude 3.5 Sonnet (Disabled)", Disabled: true),
    ];
}

Declarative

Use child components when you want to declare options inline. SelectItem, SelectLabel, SelectSeparator, and SelectGroup map to the same selection/keyboard/scroll behavior as the Items mode.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<Select T="string"
        Label="Framework"
        @bind-Value="_framework"
        Placeholder="Select a framework"
        MaxVisibleItems="6">
    <SelectGroup>
        <SelectLabel Text="Frontend" />
        <SelectItem Value='@("react")' Text="React" />
        <SelectItem Value='@("svelte")' Text="Svelte" />
        <SelectItem Value='@("vue")' Text="Vue" />

        <SelectSeparator />

        <SelectLabel Text="Backend" />
        <SelectItem Value='@("dotnet")' Text=".NET" />
        <SelectItem Value='@("node")' Text="Node.js" />
        <SelectItem Value='@("rails")' Text="Rails (Disabled)" Disabled="true" />
    </SelectGroup>
</Select>

@code {
    private string? _framework = "dotnet";
}

API Reference

Select`1

Dropdown select component for choosing a single value from a list of options.

Properties

Name	Type	Description
`AdditionalAttributes`	`Dictionary<string, Object>`
`ChildContent`	`RenderFragment`
`Class`	`string`
`Disabled`	`bool`
`Items`	`IEnumerable<SelectOption<T>>`
`Label`	`string`	Optional label displayed at the top of the dropdown content 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 the width of its option content instead of matching the trigger width.
`RenderItem`	`RenderFragment<SelectOption<T>>`
`Size`	`Size`	Size variant applied to the trigger.
`TriggerClass`	`string`	Additional CSS classes applied to the trigger 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.