Components / Select

Select

Displays a list of options for the user to pick from, triggered by a button. The brain handles anchored positioning, the focus trap, typeahead, roving keyboard navigation, and a hidden form mirror; open it below and type to feel the listbox.

Examples

Selected: none

razor

<ZitsSelect @bind-Value="_fruit" class="w-[180px]">
    <ZitsSelectTrigger>
        <ZitsSelectValue Placeholder="Select a fruit" />
    </ZitsSelectTrigger>
    <ZitsSelectContent>
        <ZitsSelectGroup>
            <ZitsSelectLabel>Fruits</ZitsSelectLabel>
            <ZitsSelectItem Value="apple" TextValue="Apple" />
            <ZitsSelectItem Value="banana" TextValue="Banana" />
            <ZitsSelectItem Value="blueberry" TextValue="Blueberry" />
        </ZitsSelectGroup>
    </ZitsSelectContent>
</ZitsSelect>

@code { private string? _fruit; }

Anatomy

Compose the parts: a trigger holding the value, and portalled content holding grouped items.

razor

ZitsSelect
├── ZitsSelectTrigger
│   └── ZitsSelectValue       (shows the selected label / placeholder)
└── ZitsSelectContent         (portalled, anchored)
    └── ZitsSelectGroup
        ├── ZitsSelectLabel
        ├── ZitsSelectItem
        └── ZitsSelectSeparator

Installation

Terminal bash

navius add select

API reference

ZitsSelect (root):

Prop	Type	Default
Value	string?	-
ValueChanged	EventCallback<string?>	-
DefaultValue	string?	-
Open	bool	false
OpenChanged	EventCallback<bool>	-
DefaultOpen	bool	false
Disabled	bool	false
Name	string?	-
Required	bool	false
Dir	string?	-

ZitsSelectItem:

Prop	Type	Default
Value	string	""
TextValue	string?	-
Disabled	bool	false