Blazorise Radio component

The Radio allow the user to select a single option from a group.

Radio Button Group allows the user to select exactly one value from a list of related, but mutually exclusive, options.

Structure

<RadioGroup> main component for grouping radios.
- <Radio> radio button, used as an option inside a RadioGroup.

Examples

Basic RadioGroup

RadioGroup is a helpful wrapper used to group Radio components that provides an easier API, and proper keyboard accessibility to the group.

Red

Green

Blue

<RadioGroup TValue="string" Name="colors">
        <Radio Value="@("red")">Red</Radio>
        <Radio Value="@("green")">Green</Radio>
        <Radio Value="@("blue")">Blue</Radio>
</RadioGroup>

Important Note: For the RadioGroup and Radio components to work correctly, the TValue type must match across both. This is especially important when using nullable types, as mismatched types can lead to unexpected behavior.

RadioGroup Buttons

By setting the Buttons flag, radios will be grouped together and will appear as buttons.

Red Green Blue

<RadioGroup TValue="string" Name="colors" Buttons>
        <Radio Value="@("red")">Red</Radio>
        <Radio Value="@("green")">Green</Radio>
        <Radio Value="@("blue")">Blue</Radio>
</RadioGroup>

Custom Button Colors

Changing the color of the radio buttons is as simple as setting the Color attribute on a Radio component.

Left Middle Right

<RadioGroup TValue="string" Name="side" Buttons>
        <Radio Value="@("left")" Color="Color.Danger">Left</Radio>
        <Radio Value="@("middle")" Color="Color.Warning">Middle</Radio>
        <Radio Value="@("right")" Color="Color.Success">Right</Radio>
</RadioGroup>

Binding

Two-way binding

Red

Green

Blue

<RadioGroup TValue="string" Name="colors" @bind-Value="@checkedValue">
    <Radio Value="@("red")">Red</Radio>
    <Radio Value="@("green")">Green</Radio>
    <Radio Value="@("blue")">Blue</Radio>
</RadioGroup>

@code{
    string checkedValue = "green";
}

Manual event binding

Red

Green

Blue

<RadioGroup TValue="string" Name="colors" Value="@checkedValue" ValueChanged="@OnValueChanged">
    <Radio Value="@("red")">Red</Radio>
    <Radio Value="@("green")">Green</Radio>
    <Radio Value="@("blue")">Blue</Radio>
</RadioGroup>

@code{
    string checkedValue = "green";

    Task OnValueChanged(string value)
    {
        checkedValue = value;

        return Task.CompletedTask;
    }
}

API

Parameters

RadioGroup

Parameter	Description	Type	Default
`AriaDescribedBy`	Gets or sets the aria-describedby attribute value. Remarks When set, this value is rendered as-is and overrides help and validation message ids generated by Field and Validation.	`string`
`AriaInvalid`	Gets or sets the aria-invalid attribute value. Remarks When set, this value is rendered as-is and overrides the validation-derived aria-invalid state.	`string`
`Autofocus`	Set's the focus to the component after the rendering is done.	`bool`	`false`
`Buttons`	Flag which indicates that radios will appear as button.	`bool`	`false`
`ChildContent`	Specifies the content to be rendered inside this RadioGroup.	`RenderFragment`	`null`
`Classes`	Custom CSS class names for component elements.	`TClasses`	`null`
`Color`	Defines the color or radio buttons(only when Buttons is true).	`Color`	`Color.Secondary`
`Disabled`	Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.	`bool`	`false`
`Feedback`	Placeholder for validation messages.	`RenderFragment`	`null`
`Intent`	Defines the intent of radio buttons(only when Buttons is true).	`Intent`	`null`
`Name`	Radio group name.	`string`
`Orientation`	Defines the orientation of the radio elements. Possible values:`Horizontal`, `Vertical`	`Orientation`	`Orientation.Horizontal`
`ReadOnly`	Add the readonly boolean attribute on an input to prevent modification of the input’s value.	`bool`	`false`
`Size`	Sets the size of the input control.	`Size?`	`null`
`Styles`	Custom inline styles for component elements.	`TStyles`	`null`
`TabIndex`	If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.	`int?`	`null`
`Value`	Gets or sets the value inside the input field.	`TValue`	`null`
`ValueExpression`	Gets or sets an expression that identifies the input value.	`Expression<Func<TValue>>`	`null`

Radio

Parameter	Description	Type	Default
`AriaDescribedBy`	Gets or sets the aria-describedby attribute value. Remarks When set, this value is rendered as-is and overrides help and validation message ids generated by Field and Validation.	`string`
`AriaInvalid`	Gets or sets the aria-invalid attribute value. Remarks When set, this value is rendered as-is and overrides the validation-derived aria-invalid state.	`string`
`Autofocus`	Set's the focus to the component after the rendering is done.	`bool`	`false`
`ChildContent`	Specifies the content to be rendered inside this Radio.	`RenderFragment`	`null`
`Classes`	Custom CSS class names for component elements.	`TClasses`	`null`
`Color`	Defines the color of a radio button(only when Buttons is true).	`Color`	`null`
`Cursor`	Defines the mouse cursor based on the behaviour by the current css framework. Possible values:`Default`, `Pointer`	`Cursor`	`Cursor.Default`
`Disabled`	Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.	`bool`	`false`
`Feedback`	Placeholder for validation messages.	`RenderFragment`	`null`
`Group`	Sets the radio group name.	`string`
`Inline`	Group checkboxes or radios on the same horizontal row.	`bool`	`false`
`Intent`	Defines the intent of a radio button(only when Buttons is true).	`Intent`	`null`
`ReadOnly`	Add the readonly boolean attribute on an input to prevent modification of the input’s value.	`bool`	`false`
`Size`	Sets the size of the input control.	`Size?`	`null`
`Styles`	Custom inline styles for component elements.	`TStyles`	`null`
`TabIndex`	If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.	`int?`	`null`
`Value`	Gets or sets the value inside the input field.	`TValue`	`null`
`ValueExpression`	Gets or sets an expression that identifies the input value.	`Expression<Func<TValue>>`	`null`

Events

RadioGroup

Event	Description	Type
`Blur`	The blur event fires when an element has lost focus.	`EventCallback<FocusEventArgs>`
`CustomValidationValue`	Used to provide custom validation value on which the validation will be processed with the Validator handler. Remarks Should be used carefully as it's only meant for some special cases when input is used in a wrapper component, like Autocomplete or SelectList.	`Func<TValue>`
`FocusIn`	Occurs when the input box gains focus.	`EventCallback<FocusEventArgs>`
`FocusOut`	Occurs when the input box loses focus.	`EventCallback<FocusEventArgs>`
`KeyDown`	Occurs when a key is pressed down while the control has focus.	`EventCallback<KeyboardEventArgs>`
`KeyPress`	Occurs when a key is pressed while the control has focus.	`EventCallback<KeyboardEventArgs>`
`KeyUp`	Occurs when a key is released while the control has focus.	`EventCallback<KeyboardEventArgs>`
`OnFocus`	Occurs when the input box gains or loses focus.	`EventCallback<FocusEventArgs>`
`ValueChanged`	Occurs after value has changed.	`EventCallback<TValue>`

Radio

Event	Description	Type
`Blur`	The blur event fires when an element has lost focus.	`EventCallback<FocusEventArgs>`
`CustomValidationValue`	Used to provide custom validation value on which the validation will be processed with the Validator handler. Remarks Should be used carefully as it's only meant for some special cases when input is used in a wrapper component, like Autocomplete or SelectList.	`Func<TValue>`
`FocusIn`	Occurs when the input box gains focus.	`EventCallback<FocusEventArgs>`
`FocusOut`	Occurs when the input box loses focus.	`EventCallback<FocusEventArgs>`
`KeyDown`	Occurs when a key is pressed down while the control has focus.	`EventCallback<KeyboardEventArgs>`
`KeyPress`	Occurs when a key is pressed while the control has focus.	`EventCallback<KeyboardEventArgs>`
`KeyUp`	Occurs when a key is released while the control has focus.	`EventCallback<KeyboardEventArgs>`
`OnFocus`	Occurs when the input box gains or loses focus.	`EventCallback<FocusEventArgs>`
`ValueChanged`	Occurs after value has changed.	`EventCallback<TValue>`

Methods

RadioGroup

Method	Description	Return	Parameters
`Focus`	Sets the focus on the underline element.	`Task`	`bool scrollToElement`
`Revalidate`	Forces the Validation (if any is used) to re-validate with the new custom or internal value.	`Task`

Radio

Method	Description	Return	Parameters
`Focus`	Sets the focus on the underline element.	`Task`	`bool scrollToElement`
`Revalidate`	Forces the Validation (if any is used) to re-validate with the new custom or internal value.	`Task`

Blazorise Radio component

Structure

Examples

Basic RadioGroup

RadioGroup Buttons

Custom Button Colors

Binding

Two-way binding

Manual event binding

API

Parameters

RadioGroup

Radio

Events

RadioGroup

Radio

Methods

RadioGroup

Radio

On this page