P11 Blazor UI Library – Bootstrap 5.3 Components

P11ButtonRadio Component

The P11ButtonRadio component provides a styled group of mutually exclusive radio options, rendered as **Bootstrap buttons** within a btn-group. This is ideal for visually distinct selections and uses the component's internal logic to manage the active/outline button state.

Note: The key difference to P11Radio is the presence of the styling parameters ButtonVariant and ButtonSize. These parameters are cascaded to all child options but can be overridden on manually defined P11ButtonRadioOption components.

P11ButtonRadio Component Examples

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

Basic usage

Yes, no or camcel

Currently selected value: no

Female or male

Currently selected value: female

Select a day of the week

Currently selected value: Wednesday

Implementation

<h4 class="mb-3">Basic usage</h4>
<P11ButtonRadio TValue="string"
                @bind-Value="answer"
                Label="Yes, no or camcel"
                ButtonVariant="@ButtonVariant.Primary"
                CssClassGroup="w-100"
                ButtonSize="@Size.Medium">
    <div class="d-flex w-100 gap-3">
        <P11ButtonRadioOption TValue="string" Value="@("yes")" Text="Yes" CssClass="flex-fill"/>
        <P11ButtonRadioOption TValue="string" Value="@("no")" Text="No" CssClass="flex-fill"/>
        <P11ButtonRadioOption TValue="string" Value="@("cancel")" Text="Cancel" CssClass="flex-fill"/>
    </div>
</P11ButtonRadio>
<br />
<P11ButtonRadio TValue="string"
                @bind-Value="answer"
                Label="Yes, no or camcel"
                ButtonVariant="@ButtonVariant.Danger"
                ButtonSize="@Size.Medium">
    <P11ButtonRadioOption TValue="string" Value="@("yes")" Text="Yes" style="width: 150px;" />
    <P11ButtonRadioOption TValue="string" Value="@("no")" Text="No" style="width: 150px;" />
    <P11ButtonRadioOption TValue="string" Value="@("cancel")" Text="Cancel" style="width: 150px;" />
</P11ButtonRadio>
<br />
<P11ButtonRadio TValue="string"
                @bind-Value="answer"
                Label="Yes, no or camcel"
                ButtonVariant="@ButtonVariant.Secondary"
                ButtonSize="@Size.Medium">
    <P11ButtonRadioOption TValue="string" Value="@("yes")" Text="Yes" style="width: 150px; background: #bbbdbb;" />
    <P11ButtonRadioOption TValue="string" Value="@("no")" Text="No" style="width: 150px; background: #bbbdbb;" />
    <P11ButtonRadioOption TValue="string" Value="@("cancel")" Text="Cancel" style="width: 150px; background: #bbbdbb;" />
</P11ButtonRadio>
<p>Currently selected value: <strong>@answer</strong></p>

<br />
<P11ButtonRadio TValue="string"
                @bind-Value="SelectedFemaleMale"
                Label="Female or male"
                ButtonVariant="@ButtonVariant.Warning"
                ButtonSize="@Size.Large"
                Options="ButtonOptions" />
<br />
<P11ButtonRadio TValue="string"
                @bind-Value="SelectedFemaleMale"
                Label="Female or male"
                ButtonVariant="@ButtonVariant.Secondary"
                ButtonSize="@Size.Medium">
    <P11ButtonRadioOption TValue="string" Value="@("female")" Text="Female" IconClass="bi bi-gender-female" style="width: 150px;" />
    <P11ButtonRadioOption TValue="string" Value="@("male")" Text="Male" IconClass="bi bi-gender-male" IconPosition="IconPosition.End" style="width: 150px;" />
</P11ButtonRadio>
<p>Currently selected value: <strong>@SelectedFemaleMale</strong></p>

<br />
<P11ButtonRadio TValue="DayOfWeek?"
                @bind-Value="SelectedDay"
                Label="Select a day of the week"
                ButtonVariant="@ButtonVariant.Success"
                ButtonSize="@Size.Medium">

    @foreach (var day in DaysOfTheWeek)
    {
        <P11ButtonRadioOption TValue="DayOfWeek?"
                              Value="day"
                              style="width: 100px;"
                              Text="@day.ToString()" />
    }

</P11ButtonRadio>
<p>Currently selected value: <strong>@SelectedDay</strong></p>

@code {
    private string answer = "no";
    private string SelectedFemaleMale = "female";
    public DayOfWeek? SelectedDay { get; set; } = DayOfWeek.Wednesday;

    public IEnumerable<p11.UI.Models.RadioOptionItem<string>> ButtonOptions { get; set; } = new List<p11.UI.Models.RadioOptionItem<string>>
    {
        new() { Value = "female", Text = "Female" },
        new() { Value = "male", Text = "Male" }
    };

    public IEnumerable<DayOfWeek> DaysOfTheWeek { get; set; } = new List<DayOfWeek>
    {
        DayOfWeek.Monday,
        DayOfWeek.Tuesday,
        DayOfWeek.Wednesday,
        DayOfWeek.Thursday,
        DayOfWeek.Friday,
        DayOfWeek.Saturday,
        DayOfWeek.Sunday
    };
}

Component API

P11ButtonRadio Parameters

Parameter	Type	Default	Description
`ButtonVariant`	`ButtonVariant`	`Primary`	The primary color variant (e.g., Primary, Danger, Info) used for all buttons in the group. This is cascaded to child options.
`ButtonSize`	`Size`	`Medium`	The size (Small, Medium, Large) applied to the button group (`btn-group-sm/lg`) and cascaded to all buttons.
`CssClass`	`string?`	`null`	Gets or sets an optional CSS class string that will be applied to the `fieldset` element of the component.
`CssClassGroup`	`string?`	`null`	Gets or sets an optional CSS class string that will be applied to the `button group` element of the component.
`Label`	`string?`	`null`	The label text displayed above the button group.
`Value`	`TValue?`	`null`	The currently selected value. Use with `@bind-Value`.
`Options`	`IEnumerable<RadioOptionItem<TValue>>?`	`null`	Optional collection of options used to generate button options automatically.
`ChildContent`	`RenderFragment?`	`null`	RenderFragment for manually defining child button options, e.g., using `P11ButtonRadioOption`.
`ValueChanged`	`EventCallback<TValue>`	-	Invoked when the selected value changes.

P11ButtonRadioOption Parameters

class="table-light">

Parameter	Type	Default	Description
`Value`	`TValue`	-	The value associated with this button option.
`Text`	`string?`	`null`	The display text shown on the button.
`IconClass`	`string?`	`null`	The CSS class for an icon (e.g., `bi bi-check`) to be displayed within the button.
`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. Essential when only an icon is displayed (no `Text`).
`Title`	`string?`	`null`	Tooltip text that appears when the user hovers over the button.
`SkipValidation`	`bool`	`false`	If true, suppresses developer-facing configuration validation warnings/errors.
`Variant`	`ButtonVariant?`	`null`	Optional override. If set, this variant is used instead of the cascaded `ButtonVariant` from the parent.
`Size`	`Size?`	`null`	Optional override. If set, this size is used instead of the cascaded `ButtonSize` from the parent.
`IsDisabled`	`bool`	`false`	If true, the button is rendered as disabled.
`CssClass`	`string?`	`null`	Gets or sets an optional CSS class string that will be applied to the `button` element of the component group.