Data Picker

shellui add data-picker

<DataPicker TItem="Person" TKey="int"
    Items="_people"
    @bind-Value="_selected"
    KeySelector="p => p.Id"
    DisplaySelector="p => p.Name"
    Placeholder="Choose a person" />

<p>Selected: @_selected?.Name</p>

@code {
    private Person? _selected;
}
@code {
    private List<Person> _people = new()
    {
        new(1, "Ada Lovelace", "Engineering"),
        new(2, "Grace Hopper", "Engineering"),
        new(3, "Katherine Johnson", "Research"),
    };

    record Person(int Id, string Name, string Team);
}

<DataPicker TItem="Person" TKey="int" Items="_people" @bind-Value="_selected"
    KeySelector="p => p.Id" DisplaySelector="p => p.Name"
    SearchPredicate="(p, q) => p.Name.Contains(q, StringComparison.OrdinalIgnoreCase) || p.Team.Contains(q, StringComparison.OrdinalIgnoreCase)">
    <OptionTemplate>
        <div class="flex flex-col">
            <span>@context.Name</span>
            <span class="text-xs text-muted-foreground">@context.Team</span>
        </div>
    </OptionTemplate>
</DataPicker>