p11 UI
About

P11Radio Component

The P11Radio component provides a robust and accessible way to present a group of mutually exclusive radio button options. It leverages the native HTML <input type="radio"> element combined with Bootstrap classes for consistent styling and behavior.
Note: You can define radio options either by providing an Options collection for automatic rendering or by placing individual P11RadioOption components within the ChildContent. If both are provided, ChildContent takes precedence. A unique Name attribute is essential for grouping radio buttons correctly.

P11Radio Component Examples

These examples demonstrate various configurations and functionalities of the P11Radio component, showcasing its flexibility for different use cases.

1. Color Selection (String Values, Options List)

Currently selected color: blue

Select your favorite color:
This color represents your personality.

Implementation


<P11Radio TValue="string"
          Label="Wählen Sie Ihre Lieblingsfarbe:"
          Description="Diese Farbe repräsentiert Ihre Persönlichkeit."
          @bind-Value="SelectedColor"
          Options="@ColorOptions"
          CssClass="mb-3" />

<button class="btn btn-secondary btn-sm" @onclick="() => SelectedColor = null">Auswahl aufheben</button>


private string? SelectedColor { get; set; } = "blue";

private List<RadioOptionItem<string>> ColorOptions = new()
{
    new() { Text = "Rot", Value = "red" },
    new() { Text = "Grün", Value = "green" },
    new() { Text = "Blau", Value = "blue" },
    new() { Text = "Gelb", Value = "yellow" }
};

2. Age Group (int?, Options List)

Currently selected age group (ID): N/A

Which age group are you in?

Implementation


<P11Radio TValue="int?"
          Label="In welcher Altersgruppe sind Sie?"
          @bind-Value="SelectedAgeGroup"
          Options="@AgeGroupOptions"
          CssClass="mb-3" />

<button class="btn btn-secondary btn-sm" @onclick="() => SelectedAgeGroup = null">Auswahl aufheben</button>


private int? SelectedAgeGroup { get; set; }

private List<RadioOptionItem<int?>> AgeGroupOptions = new()
{
    new() { Text = "Unter 18", Value = 1 },
    new() { Text = "18–30 Jahre", Value = 2 },
    new() { Text = "31–50 Jahre", Value = 3 },
    new() { Text = "Über 50 Jahre", Value = 4 }
};

3. Meal Preference (Enum Values, Options List)

Currently selected preference: Omnivore

What do you prefer to eat?

Implementation


<P11Radio TValue="MealPreference?"
          Label="Was essen Sie am liebsten?"
          @bind-Value="SelectedMealPreference"
          Options="@MealPreferenceOptions"
          CssClass="mb-3" />

<button class="btn btn-secondary btn-sm" @onclick="() => SelectedMealPreference = null">Auswahl aufheben</button>


public enum MealPreference
{
    Vegetarian,
    Vegan,
    Omnivore,
    Pescatarian
}

private MealPreference? SelectedMealPreference { get; set; } = MealPreference.Omnivore;

private List<RadioOptionItem<MealPreference?>> MealPreferenceOptions = new()
{
    new() { Text = "Vegetarisch", Value = MealPreference.Vegetarian },
    new() { Text = "Vegan", Value = MealPreference.Vegan },
    new() { Text = "Omnivore", Value = MealPreference.Omnivore },
    new() { Text = "Pescetarisch", Value = MealPreference.Pescatarian }
};

4. Language (with 'disabled' option)

Currently selected language: en

Preferred language for communication:

Implementation


<P11Radio TValue="string"
          Label="Bevorzugte Sprache für die Kommunikation:"
          @bind-Value="SelectedLanguage"
          Options="@LanguageOptions"
          CssClass="mb-3" />


private string? SelectedLanguage { get; set; } = "en";

private List<RadioOptionItem<string>> LanguageOptions = new()
{
    new() { Text = "Englisch", Value = "en" },
    new() { Text = "Deutsch", Value = "de" },
    new() {
        Text = "Französisch (deaktiviert)", Value = "fr",
        AdditionalAttributes = new Dictionary<string, object> { { "disabled", true } }
    }
};

5. Error Scenario: No Options

This example demonstrates the component's behavior when no options are provided. With <code>ShowDevelopmentErrors</code> set to true, an error message will be displayed.

Error Test: No options provided

Implementation


<P11Radio TValue="string"
          Label="Fehlertest: Keine Optionen angegeben"
          @bind-Value="ErrorTestValue"
          Options="@EmptyOptions"
          ShowDevelopmentErrors="true"
          CssClass="mb-3" />


private string ErrorTestValue { get; set; } = string.Empty;

private List<RadioOptionItem<string>> EmptyOptions = new(); // For error test

6. Manually Defined Options with &lt;P11RadioOption&gt;

Manually selected country:

Select a country (manual definition):

Implementation


<P11Radio TValue="string"
          Label="Wählen Sie ein Land (manuelle Definition):"
          @bind-Value="SelectedCountry"
          Name="countryRadio"
          CssClass="mb-3">
    <P11RadioOption TValue="string" Value="@("de")" Text="Deutschland" />
    <P11RadioOption TValue="string" Value="@("at")" Text="Österreich" />
    <P11RadioOption TValue="string" Value="@("ch")" Text="Schweiz" />
    <P11RadioOption TValue="string" Value="@("custom")" Text="Sonstiges" />
</P11Radio>


private string? SelectedCountry { get; set; }

7. ValueChanged Event Example

This example demonstrates how to use the <code>ValueChanged</code> event to react to changes in the selected radio option.

Selected Feedback Option: N/A

Last ValueChanged Event Fired: Never

How would you rate our service?

Implementation


<P11Radio TValue="string"
          Label="How would you rate our service?"
          Value="SelectedFeedbackOption"
          ValueChanged="@((string val) => HandleFeedbackOptionChanged(val))"
          Options="@FeedbackOptions"
          CssClass="mb-3" />


private string? SelectedFeedbackOption { get; set; }
private string? LastValueChangedEvent { get; set; }

private List<RadioOptionItem<string>> FeedbackOptions = new()
{
    new() { Text = "Excellent", Value = "excellent" },
    new() { Text = "Good", Value = "good" },
    new() { Text = "Average", Value = "average" },
    new() { Text = "Poor", Value = "poor" }
};

private void HandleFeedbackOptionChanged(string? newValue)
{
    SelectedFeedbackOption = newValue;
    LastValueChangedEvent = $"Value changed to: {newValue} at {DateTime.Now:HH:mm:ss}";
    // You can perform other actions here based on the new value
    Console.WriteLine($"Feedback option changed to: {newValue}");
}

Component API

Parameter Type Default Description
Label string? null The label text displayed above the radio group.
Description string? null Optional descriptive text shown below the group.
Value TValue? null The currently selected value. Use with @bind-Value.
Name string? null (generated unique) The HTML name attribute shared by all radio buttons in this group. If not set, a unique name is generated.
Options IEnumerable<RadioOptionItem<TValue>>? null Optional collection of options used to generate radio buttons automatically.
ChildContent RenderFragment? null RenderFragment for manually defining child radio options. Useful for custom layouts or when Options are not sufficient.
CssClass string? null Optional CSS class for the outermost div.
AdditionalAttributes Dictionary<string, object>? null Additional HTML attributes for the outermost div. These are captured unmatched attributes.
ShowDevelopmentErrors bool true If true, developer error messages will be shown.
Events
ValueChanged EventCallback<TValue> - Invoked when the selected value changes.



An unhandled error has occurred. Reload 🗙