Basic Usage

Learn the fundamentals of using BlazorXSelect component

Simple String Selection

The most basic usage with a list of strings.

Selected: None

@code {
    private string? selectedString;
    private List<SelectOption<string>> stringOptions = new()
    {
        new() { Id = "us", Text = "United States" },
        new() { Id = "uk", Text = "United Kingdom" },
        new() { Id = "ca", Text = "Canada" },
        new() { Id = "de", Text = "Germany" }
    };
}

Integer Selection

Selecting numeric values with nullable support.

Selected: None

@code {
    private int? selectedInt;
    private List<SelectOption<int?>> intOptions = new()
    {
        new() { Id = 1, Text = "Low Priority" },
        new() { Id = 2, Text = "Medium Priority" },
        new() { Id = 3, Text = "High Priority" },
        new() { Id = 4, Text = "Critical" }
    };
}

Enum Selection

Directly bind to enum types with automatic conversion.

Selected: Guest

public enum UserRole
{
    Guest,
    User,
    Moderator,
    Administrator
}

@code {
    private UserRole selectedRole = UserRole.Guest;
    private List<SelectOption<UserRole>> enumOptions = new()
    {
        new() { Id = UserRole.Guest, Text = "Guest" },
        new() { Id = UserRole.User, Text = "User" },
        new() { Id = UserRole.Moderator, Text = "Moderator" },
        new() { Id = UserRole.Administrator, Text = "Administrator" }
    };
}

GUID Selection

Working with nullable GUID types.

Selected: None

Disabled State

Disable the component to prevent user interaction.

Disabled Options

Specific options can be disabled individually.

Selected: None