p11 UI
true-perfect-code
Version: 1.1.69

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.
Selected fileformat: csv
Selected answer: 1

Implementation

<h4 class="mb-3">1. Color Selection (String Values, Options List)</h4>
<p>Currently selected color: <strong>@SelectedColor</strong></p>

<P11Radio TValue="string"
          Label="Select your favorite color:"
          Description="This color represents your personality."
          @bind-Value="SelectedColor"
          Options="@ColorOptions"
          CssClass="mb-3" />

<button class="btn btn-secondary btn-sm" @onclick="() => SelectedColor = null">Clear Selection</button>
<hr />

<P11Radio TValue="string"
          @bind-Value="SelectedFormat"
          Name="CSVdelimiterRadio"
          CssClass="mb-3">
    <div class="d-flex gap-3">
        <P11RadioOption TValue="string" Value="@("csv")" IconClass="bi bi-filetype-csv" IconPosition="IconPosition.End" Text="CSV" />
        <P11RadioOption TValue="string" Value="@("xml")" IconClass="bi bi-filetype-xml" IconPosition="IconPosition.End" Text="XML" />
        <P11RadioOption TValue="string" Value="@("json")" IconClass="bi bi-filetype-json" IconPosition="IconPosition.End" Text="Json" />
    </div>
</P11Radio>
<span>Selected fileformat: <b>@SelectedFormat</b></span>
<hr />

<P11Radio TValue="int"
          @bind-Value="SelectedAnswer"
          Name="AnswersRadio"
          CssClassGroup="w-100" >
    <div class="d-flex w-100 gap-3">
        <P11RadioOption TValue="int" Value="1" IconClass="bi bi-emoji-smile" IconPosition="IconPosition.Start" Text="The website is easy to navigate." CssClass="flex-fill" />
        <P11RadioOption TValue="int" Value="2" IconClass="bi bi-emoji-neutral" IconPosition="IconPosition.Start" Text="The layout feels confusing to me." CssClass="flex-fill" />
        <P11RadioOption TValue="int" Value="3" IconClass="bi bi-emoji-frown" IconPosition="IconPosition.Start" Text="It needs more visual hierarchy." CssClass="flex-fill" />
    </div>
</P11Radio>
<span>Selected answer: <b>@SelectedAnswer.ToString()</b></span>
@code {
    // Selected values
    private string? SelectedColor { get; set; } = "blue";
    private string? SelectedFormat { get; set; } = "csv";
    private int SelectedAnswer { get; set; } = 1;

    // Options
    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

<h4 class="mb-3">2. Age Group (int?, Options List)</h4>
<p>Currently selected age group (ID): <strong>@(SelectedAgeGroup?.ToString() ?? "N/A")</strong></p>

<P11Radio TValue="int?"
          Label="Which age group are you in?"
          @bind-Value="SelectedAgeGroup"
          Options="@AgeGroupOptions"
          CssClass="mb-3" />

<button class="btn btn-secondary btn-sm" @onclick="() => SelectedAgeGroup = null">Clear Selection</button>
@code {
    public enum MealPreference
    {
        Vegetarian,
        Vegan,
        Omnivore,
        Pescatarian
    }

    // Selected values
    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

<h4 class="mb-3">3. Meal Preference (Enum Values, Options List)</h4>
<p>Currently selected preference: <strong>@(SelectedMealPreference?.ToString() ?? "N/A")</strong></p>

<P11Radio TValue="MealPreference?"
          Label="What do you prefer to eat?"
          @bind-Value="SelectedMealPreference"
          Options="@MealPreferenceOptions"
          CssClass="mb-3" />

<button class="btn btn-secondary btn-sm" @onclick="() => SelectedMealPreference = null">Clear Selection</button>
@code {
    public enum MealPreference
    {
        Vegetarian,
        Vegan,
        Omnivore,
        Pescatarian
    }

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

    // Options           
    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

<h4 class="mb-3">4. Language (with 'disabled' option)</h4>
<p>Currently selected language: <strong>@SelectedLanguage</strong></p>

<P11Radio TValue="string"
          Label="Preferred language for communication:"
          @bind-Value="SelectedLanguage"
          Options="@LanguageOptions"
          CssClass="mb-3" />
@code {
    // Selected values
    private string? SelectedLanguage { get; set; } = "en";

    // Options
    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 ShowDevelopmentErrors set to true, an error message will be displayed.

Error Test: No options provided

Implementation

<h4 class="mb-3">5. Error Scenario: No Options</h4>
<p>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.</p>
<P11Radio TValue="string"
          Label="Error Test: No options provided"
          @bind-Value="ErrorTestValue"
          Options="@EmptyOptions"
          ShowDevelopmentErrors="true"
          CssClass="mb-3" />
@code {
    private string ErrorTestValue { get; set; } = string.Empty;

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

6. Manually Defined Options with <P11RadioOption>

Manually selected country:

Select a country (manual definition):

Implementation

<h4 class="mb-3">6. Manually Defined Options with &lt;P11RadioOption&gt;</h4>
<p>Manually selected country: <strong>@SelectedCountry</strong></p>

<P11Radio TValue="string"
          Label="Select a country (manual definition):"
          @bind-Value="SelectedCountry"
          Name="countryRadio"
          CssClass="mb-3">
    <P11RadioOption TValue="string" Value="@("de")" Text="Germany" />
    <P11RadioOption TValue="string" Value="@("at")" Text="Austria" />
    <P11RadioOption TValue="string" Value="@("ch")" Text="Switzerland" />
    <P11RadioOption TValue="string" Value="@("custom")" Text="Other" />
</P11Radio>
@code {
    private string? SelectedCountry { get; set; }
}

7. ValueChanged Event Example

This example demonstrates how to use the ValueChanged 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

<h4 class="mb-3">7. ValueChanged Event Example</h4>
<p>This example demonstrates how to use the <code>ValueChanged</code> event to react to changes in the selected radio option.</p>
<p>Selected Feedback Option: <strong>@(SelectedFeedbackOption ?? "N/A")</strong></p>
<p>Last ValueChanged Event Fired: <strong>@(LastValueChangedEvent ?? "Never")</strong></p>

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

P11Radio Parameters (Group)

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.
ValueChanged EventCallback<TValue> - Invoked when the selected value changes.
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, e.g., using P11RadioOption.
CssClass string? null Optional CSS class for the outermost container (e.g., the fieldset element).
CssClassGroup string? null Optional CSS class for the container element that wraps all radio options. Useful for layout controls (e.g., d-flex or row).
AdditionalAttributes Dictionary<string, object>? null Additional HTML attributes for the outermost container. These are captured unmatched attributes.
ShowDevelopmentErrors bool true If true, developer configuration validation messages from options will be shown.

P11RadioOption Parameters (Child)

Parameter Type Default Description
Value TValue - The value associated with this radio option.
Text string? null The display text shown next to the radio input.
IconClass string? null The CSS class for an icon (e.g., bi bi-check) to be displayed within the label.
IconPosition IconPosition Start Specifies the position of the icon relative to the text (Start or End).
AriaLabel string? null Optional ARIA label for screen readers. Recommended when only an icon is displayed (no Text).
Title string? null Tooltip text that appears when the user hovers over the label.
SkipValidation bool false If true, suppresses developer-facing configuration validation warnings/errors for this specific option.
Id string? null (auto-generated) The HTML id attribute for the input element. If not provided, it's auto-generated.
CssClass string? string.Empty Optional CSS class for the individual radio wrapper element (div.form-check).
AdditionalAttributes Dictionary<string, object>? null Additional HTML attributes for the radio input element.
An unhandled error has occurred. Reload 🗙