RadioButton

Description

This component represents a radio button in Blazor using the Gap.Blazor.RadioButton model. It renders a native HTML <input type="radio"> element with dynamic styling and alignment, and supports model-driven state and event handling.

Usage

<WMStyleBase model=@radioModel></WMStyleBase>
<div class="@radioModel.GetStringClasses()">
    <label for="@radioModel.Name" style="@GetCheckAlignStyle()">
        <input type="radio" id="@radioModel.Name"
               checked="@radioModel.Checked"
               @onchange="onOptionChanged" />
        @radioModel.Text
    </label>
</div>

<style>
    [e-mail]() {
        /* Additional styling can be applied here */
    }
</style>

Properties

• RadioModel: Instance of the Gap.Blazor.RadioButton model.

• Checked: Boolean indicating whether the radio button is selected.

• Text: The label text displayed next to the radio button.

• Name: Used as the id and for attributes for accessibility and grouping.

• CheckAlign: Enum (ContentAlignment) that determines the alignment of the radio button relative to the text.

Methods

• OnInitialized(): Subscribes to the CheckedChanged event to trigger UI updates.

• onOptionChanged(ChangeEventArgs): Toggles the Checked state when the radio button is clicked.

• GetCheckAlignStyle(): Returns a CSS style string based on the CheckAlign value to control layout direction and alignment.

Dynamic Rendering

• HTML Input: Uses a native <input type="radio"> element for compatibility and accessibility.

• Label Styling: Adjusted dynamically based on alignment preferences.

• CSS Classes: Applied using radioModel.GetStringClasses() and model.GetComponentClass().

Alignment Options

CheckAlign Value	Layout Style
MiddleLeft, TopLeft, BottomLeft	Inline-flex, left-aligned radio button
MiddleRight, TopRight, BottomRight	Inline-flex, right-aligned radio button
TopCenter	Column-reverse (text below radio button)
BottomCenter	Column (text above radio button)

Events

• CheckedChanged: Triggered when the radio button’s checked state changes.