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 in a Grouped Field

When the radio group answers one named question, enable Group on <Field> and keep using <FieldLabel>. In grouped mode, the label renders as a <legend> and becomes the semantic group label for the radio group.

Choose a shipping speed

Standard

Express

Overnight

<Field Group>
    <FieldLabel>Choose a shipping speed</FieldLabel>
    <RadioGroup TValue="string" Name="shipping-speed" @bind-Value="@shippingSpeed">
        <Radio Value="@("standard")">Standard</Radio>
        <Radio Value="@("express")">Express</Radio>
        <Radio Value="@("overnight")">Overnight</Radio>
    </RadioGroup>
</Field>

@code {
    string shippingSpeed = "express";
}

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`	Specifies 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`	Specifies the aria-invalid attribute value. Remarks When set, this value is rendered as-is and overrides the validation-derived aria-invalid state.	`string`
`AriaLabelledBy`	Specifies the aria-labelledby attribute value. Remarks When set, this value is rendered as-is. Some non-labelable controls can otherwise derive it automatically from a parent FieldLabel or FieldsLabel.	`string`
`AriaRequired`	Specifies the aria-required attribute value. Remarks When set, this value overrides the required-field state resolved from the parent Validation.	`bool`	`false`
`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`
`Color`	Specifies 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`	Specifies the intent of radio buttons(only when Buttons is true).	`Intent`	`null`
`Name`	Radio group name.	`string`
`Orientation`	Specifies 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`
`TabIndex`	If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.	`int?`	`null`
`Value`	Specifies the value inside the input field.	`TValue`	`null`
`ValueExpression`	Specifies an expression that identifies the input value.	`Expression<Func<TValue>>`	`null`

Radio

Parameter	Description	Type	Default
`AriaDescribedBy`	Specifies 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`	Specifies the aria-invalid attribute value. Remarks When set, this value is rendered as-is and overrides the validation-derived aria-invalid state.	`string`
`AriaLabelledBy`	Specifies the aria-labelledby attribute value. Remarks When set, this value is rendered as-is. Some non-labelable controls can otherwise derive it automatically from a parent FieldLabel or FieldsLabel.	`string`
`AriaRequired`	Specifies the aria-required attribute value. Remarks When set, this value overrides the required-field state resolved from the parent Validation.	`bool`	`false`
`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`
`Color`	Specifies the color of a radio button(only when Buttons is true).	`Color`	`null`
`Cursor`	Specifies 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`	Specifies 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`
`TabIndex`	If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.	`int?`	`null`
`Value`	Specifies the value inside the input field.	`TValue`	`null`
`ValueExpression`	Specifies 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`	Notifies when the input box gains focus.	`EventCallback<FocusEventArgs>`
`FocusOut`	Notifies when the input box loses focus.	`EventCallback<FocusEventArgs>`
`KeyDown`	Notifies when a key is pressed down while the control has focus.	`EventCallback<KeyboardEventArgs>`
`KeyPress`	Notifies when a key is pressed while the control has focus.	`EventCallback<KeyboardEventArgs>`
`KeyUp`	Notifies when a key is released while the control has focus.	`EventCallback<KeyboardEventArgs>`
`OnFocus`	Notifies 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`	Notifies when the input box gains focus.	`EventCallback<FocusEventArgs>`
`FocusOut`	Notifies when the input box loses focus.	`EventCallback<FocusEventArgs>`
`KeyDown`	Notifies when a key is pressed down while the control has focus.	`EventCallback<KeyboardEventArgs>`
`KeyPress`	Notifies when a key is pressed while the control has focus.	`EventCallback<KeyboardEventArgs>`
`KeyUp`	Notifies when a key is released while the control has focus.	`EventCallback<KeyboardEventArgs>`
`OnFocus`	Notifies 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 in a Grouped Field

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