MultiSelect

@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Http

<Form Model="Model" FormName="multi-select-chips" OnValidSubmit="Save" MaxWidth="28.Rem" Grow>
    <MultiSelect @bind-Value="Model!.Skills" Items="AllSkills" Placeholder="Add skills" Hint="Up to 5." />
    <Row Gap="3" Align="Align.Center" Wrap>
        <Button Submit>Save</Button>
        @if (_saved)
        {
            <TextBlock Size="TextSize.Sm" Color="Color.Muted">Saved: @(Model!.Skills is { Length: > 0 } skills ? string.Join(", ", skills) : "no skills")</TextBlock>
        }
    </Row>
</Form>

@code {
    [SupplyParameterFromForm(FormName = "multi-select-chips")]
    private Profile? Model { get; set; }

    private bool _saved;

    [CascadingParameter] private HttpContext? HttpContext { get; set; }

    // A post with nothing chosen sends nothing for the field, so the model isn't filled from it:
    // give the defaults only when this form didn't post.
    protected override void OnInitialized()
    {
        // This form's own post: another form on the page posts too.
        var posted = HttpContext?.Request.HasFormContentType == true
            && HttpContext.Request.Form["_handler"] == "multi-select-chips";
        Model ??= posted ? new() : new() { Skills = ["Blazor", "C#"] };
    }

    private void Save() => _saved = true;

    public sealed class Profile
    {
        [MaxLength(5, ErrorMessage = "Pick up to 5 skills.")]
        public string[] Skills { get; set; } = [];
    }

}

@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="multi-select-reviewers" OnValidSubmit="Save" MaxWidth="28.Rem" Grow>
    <MultiSelect @bind-Value="Model!.ReviewerIds" Items="People.Keys"
                 ItemText="id => People.GetValueOrDefault(id, id.ToString())"
                 Placeholder="Add reviewers" />
    <Row><Button Submit>Request review</Button></Row>
    @if (_requested is { Count: > 0 })
    {
        <Alert Status="Status.Success">Review requested from @string.Join(", ", _requested).</Alert>
    }
    else if (_requested is not null)
    {
        <Alert Status="Status.Danger">Choose reviewers from the list.</Alert>
    }
</Form>

@code {
    [SupplyParameterFromForm(FormName = "multi-select-reviewers")]
    private ReviewRequest? Model { get; set; }

    private List<string>? _requested;

    protected override void OnInitialized() => Model ??= new();

    // Posted values can be anything: keep the people, once each.
    private void Save() => _requested = Model!.ReviewerIds!.Distinct().Where(People.ContainsKey).Select(id => People[id]).ToList();

    public sealed class ReviewRequest
    {
        // [Required] catches an empty choice on a static page, where it posts nothing and the
        // list is null; [MinLength] on an interactive page, where it's an empty list.
        [Required(ErrorMessage = "Add at least one reviewer")]
        [MinLength(1, ErrorMessage = "Add at least one reviewer")]
        [Display(Name = "Reviewers")]
        public List<int>? ReviewerIds { get; set; }
    }

}

<Form Model="Model" FormName="multi-select-enum-icons" MaxWidth="24.Rem" Grow>
    <MultiSelect @bind-Value="Model!.Labels" Items="Enum.GetValues<IssueLabel>()" Placeholder="Add labels">
        <ItemTemplate Context="label">
            <Icon Name="LabelIcon(label)" />
            <span>@label</span>
        </ItemTemplate>
    </MultiSelect>
</Form>

@code {
    [SupplyParameterFromForm(FormName = "multi-select-enum-icons")]
    private Issue? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    private static IconData LabelIcon(IssueLabel label) => label switch
    {
        IssueLabel.Bug => Lucide.Bug,
        IssueLabel.Feature => Lucide.Sparkles,
        IssueLabel.Docs => Lucide.BookOpen,
        _ => Lucide.Gauge,
    };

    public sealed class Issue
    {
        public List<IssueLabel> Labels { get; set; } = [IssueLabel.Bug];
    }

    public enum IssueLabel { Bug, Feature, Docs, Performance }
}

<Form Model="Model" FormName="multi-select-states" MaxWidth="24.Rem" Grow>
    <MultiSelect @bind-Value="Model!.Small" Items="Days" Label="Small" Size="ControlSize.Sm" />
    <MultiSelect @bind-Value="Model!.Large" Items="Days" Label="Large" Size="ControlSize.Lg" />
    <MultiSelect @bind-Value="Model!.Office" Items="Days" Label="Office days"
                 ReadOnly Hint="Read-only: posted, but can't be changed." />
    <MultiSelect @bind-Value="Model!.OnCall" Items="Days" Label="On-call days"
                 Disabled Hint="Disabled: not posted." />
</Form>

@code {
    [SupplyParameterFromForm(FormName = "multi-select-states")]
    private Schedule? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    public sealed class Schedule
    {
        public DayOfWeek[] Small { get; set; } = [DayOfWeek.Monday];
        public DayOfWeek[] Large { get; set; } = [DayOfWeek.Monday, DayOfWeek.Friday];
        public DayOfWeek[] Office { get; set; } = [DayOfWeek.Tuesday, DayOfWeek.Thursday];
        public DayOfWeek[] OnCall { get; set; } = [DayOfWeek.Saturday];
    }

}