RadioButtonList Component Samples

Basic RadioButtonList with Static Items

Selected:

<RadioButtonList TItem="object" StaticItems="colorItems" @bind-SelectedValue="selectedColor" />

@code {
    private string selectedColor = "";
    private ListItemCollection colorItems = new() {
        new ListItem("Red", "red"),
        new ListItem("Green", "green"),
        new ListItem("Blue", "blue")
    };
}

Horizontal Layout (RepeatDirection.Horizontal)

Selected:

<RadioButtonList TItem="object" 
                 StaticItems="sizeItems" 
                 RepeatDirection="RepeatDirection.Horizontal"
                 @bind-SelectedValue="selectedSize" />

Vertical Layout (RepeatDirection.Vertical - Default)

Selected:

<RadioButtonList TItem="object" 
                 StaticItems="priorityItems" 
                 RepeatDirection="RepeatDirection.Vertical"
                 @bind-SelectedValue="selectedPriority" />

Flow Layout (No Table)

Selected:

<RadioButtonList TItem="object" 
                 StaticItems="fruitItems" 
                 RepeatLayout="RepeatLayout.Flow"
                 @bind-SelectedValue="selectedFruit" />

Unordered List Layout

• Dog
• Cat
• Bird

Selected:

<RadioButtonList TItem="object" 
                 StaticItems="animalItems" 
                 RepeatLayout="RepeatLayout.UnorderedList"
                 @bind-SelectedValue="selectedAnimal" />

Ordered List Layout

1. First Place
2. Second Place
3. Third Place

Selected:

<RadioButtonList TItem="object" 
                 StaticItems="rankItems" 
                 RepeatLayout="RepeatLayout.OrderedList"
                 @bind-SelectedValue="selectedRank" />

Text Align Left (Label before radio button)

Selected:

<RadioButtonList TItem="object" 
                 StaticItems="yesNoItems" 
                 TextAlign="TextAlign.Left"
                 @bind-SelectedValue="yesNoValue" />

Text Align Right (Label after radio button - Default)

Selected:

<RadioButtonList TItem="object" 
                 StaticItems="yesNoItems" 
                 TextAlign="TextAlign.Right"
                 @bind-SelectedValue="yesNoValue2" />

Data-Bound RadioButtonList

Selected Product ID:

<RadioButtonList TItem="Product"
                 Items="products"
                 DataTextField="Name"
                 DataValueField="Id"
                 @bind-SelectedValue="selectedProduct" />

@code {
    private List<Product> products = new() {
        new Product { Id = "1", Name = "Widget" },
        new Product { Id = "2", Name = "Gadget" }
    };
}

With Styling

Selected:

<RadioButtonList TItem="object" 
                 StaticItems="styledItems"
                 BackColor="new WebColor(System.Drawing.Color.LightBlue)"
                 ForeColor="new WebColor(System.Drawing.Color.DarkBlue)"
                 BorderStyle="BorderStyle.Solid"
                 BorderWidth="Unit.Pixel(1)"
                 @bind-SelectedValue="styledValue" />

Disabled Item in List

Selected:

<RadioButtonList TItem="object" StaticItems="disabledItems" @bind-SelectedValue="disabledSelection" />

@code {
    private ListItemCollection disabledItems = new() {
        new ListItem("Available", "available"),
        new ListItem("Unavailable", "unavailable") { Enabled = false },
        new ListItem("Also Available", "also-available")
    };
}

Enabled=false (Entire list disabled)

(Entire RadioButtonList is disabled)

<RadioButtonList TItem="object" 
                 StaticItems="colorItems" 
                 Enabled="false" 
                 SelectedValue="green" />

With Change Event

Selection changed 0 times. Current:

<RadioButtonList TItem="object" 
                 StaticItems="eventItems"
                 @bind-SelectedValue="eventValue"
                 OnSelectedIndexChanged="HandleSelectionChanged" />

@code {
    private int changeCount = 0;
    private void HandleSelectionChanged(ChangeEventArgs e) {
        changeCount++;
    }
}