BrandUI Select - PrimerBlazor

Basic Select

<PrimerBrandSelect @bind-Value="basicValue"
                Placeholder="Select an option"
                Options="basicOptions" />

With Option Groups

<PrimerBrandSelect @bind-Value="groupedValue"
                Placeholder="Choose a group item"
                OptionGroups="groupedOptions" />

Disabled

<PrimerBrandSelect @bind-Value="disabledValue"
                Options="basicOptions"
                Disabled="true" />

Validation States

<PrimerStack>
    <PrimerBrandSelect @bind-Value="invalidValue"
                    Options="basicOptions"
                    IsInvalid="true" />
    <PrimerBrandSelect @bind-Value="validValue"
                    Options="basicOptions"
                    IsSuccess="true" />
</PrimerStack>

Sizes

<PrimerStack>
    <PrimerBrandSelect @bind-Value="smallValue"
                    Options="basicOptions"
                    Size="BrandSelectSize.Medium" />
    <PrimerBrandSelect @bind-Value="mediumValue"
                    Options="basicOptions"
                    Size="BrandSelectSize.Medium" />
    <PrimerBrandSelect @bind-Value="largeValue"
                    Options="basicOptions"
                    Size="BrandSelectSize.Large" />
</PrimerStack>

BrandSelect Parameters

Name	Description	Default Value	CSS Class
Id	Sets the ID of the select element	null	id
Name	Sets the name attribute	null	name
Placeholder	Displays placeholder as disabled option	null	-
DescribedBy	ARIA description reference	null	aria-describedby
Value	Currently selected value	null	-
ValueChanged	Callback triggered on value change	-	-
ValueExpression	Used by Blazor for form binding	null	-
FullWidth	Expands to full container width	false	Select-wrapper--fullWidth
Disabled	Disables the select element	false	Select-wrapper--disabled
IsInvalid	Marks input as error	false	Select--error
IsSuccess	Marks input as success	false	Select--success
Size	Visual size of the select	Medium	Select--{size}
Options	Flat list of options	[]	-
OptionGroups	Grouped list of options	null	-

private string? basicValue;
private string? groupedValue;
private string? disabledValue;
private string? invalidValue;
private string? validValue;
private string? mediumValue;
private string? largeValue;

private List<BrandSelectOption> basicOptions = new()
{
    new("one", "Option One"),
    new("two", "Option Two"),
    new("three", "Option Three")
};

private List<BrandSelectOptionGroup> groupedOptions = new()
{
    new("Group A", new List<BrandSelectOption>
    {
        new("a1", "Alpha"),
        new("a2", "Beta")
    }),
    new("Group B", new List<BrandSelectOption>
    {
        new("b1", "Gamma"),
        new("b2", "Delta")
    })
};