Multi Select
Chips-in-input multi-value picker. Generic over TItem with custom item template, full keyboard nav (Backspace removes last chip when input is empty).
Tag picker
Strings + free typing
The simplest case — a flat list of strings.
- billing
- feature
- bug
- ui
- api
- performance
- security
- documentation
- infrastructure
- frontend
- backend
- mobile
Selected: —
razor
<MultiSelect TItem="string"
Items="_tags"
Values="_selectedTags"
ValuesChanged="@((IReadOnlyList<string> v) => _selectedTags = v)"
DisplayFunc="@(s => s)"
Label="Tags"
Placeholder="Add a tag..." />Assignee picker — custom template
Two-line option, MaxValues constraint
Combine ItemTemplate with KeyFunc and a MaxValues cap to build a rich assignee selector.
- Aiko Tanaka aiko.t@example.com
- Ben Carter ben.c@example.com
- Camila Rivera cam@example.com
- Diego Costa diego.c@example.com
- Eshe Okonkwo eshe.o@example.com
- Farid Ahmed farid.a@example.com
- Greta Voss greta@example.com
- Hiroshi Sato h.sato@example.com
Up to 5 assignees.
Count: 0 / 5
razor
<MultiSelect TItem="Person"
Items="_people"
Values="_selectedPeople"
ValuesChanged="@((IReadOnlyList<Person> v) => _selectedPeople = v)"
DisplayFunc="@(p => p.Name)"
KeyFunc="@(p => p.Id)"
SearchFunc="@((p, q) => p.Name.Contains(q, StringComparison.OrdinalIgnoreCase) || p.Email.Contains(q, StringComparison.OrdinalIgnoreCase))"
Label="Assignees"
Placeholder="Search..."
MaxValues="5"
HintText="Up to 5 assignees.">
<ItemTemplate Context="person">
<div style="display: flex; flex-direction: column;">
<span class="text-sm-medium">@person.Name</span>
<span class="text-xs-regular" style="color: var(--text-tertiary);">@person.Email</span>
</div>
</ItemTemplate>
</MultiSelect>