RadioButton

in namespace DotVVM.Controls.Tailwind.Controls

Renders a custom radio button with a hidden native input and custom visual circle.

Usage & Scenarios

The RadioButton control renders a Tailwind-styled radio input. Bind the selected value with CheckedItem and specify the option value with CheckedValue.

Sample 1: Radio Group

Group radio buttons by binding them to the same CheckedItem. This sample also shows GroupName, custom content, Enabled, and the Changed command.

page.dothtml
ViewModel.cs

<div class="space-y-2">
    <t:RadioButton Text="Email"
                   CheckedValue="email"
                   CheckedItem="{value: ContactMethod}"
                   GroupName="contact-method"
                   Changed="{command: IncrementChanges()}" />

    <t:RadioButton Text="Phone"
                   CheckedValue="phone"
                   CheckedItem="{value: ContactMethod}"
                   GroupName="contact-method" />

    <t:RadioButton CheckedValue="chat"
                   CheckedItem="{value: ContactMethod}"
                   GroupName="contact-method">
        <span>Team chat <strong>(recommended)</strong></span>
    </t:RadioButton>

    <t:RadioButton Text="Disabled option"
                   CheckedValue="mail"
                   CheckedItem="{value: ContactMethod}"
                   GroupName="contact-method"
                   Enabled="false" />
</div>

<p>Selected contact method: <strong>{{value: ContactMethod}}</strong></p>
<p><code>Changed</code> command count: <strong>{{value: ChangeCount}}</strong></p>

using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.tailwind.RadioButton.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string ContactMethod { get; set; } = "email";

        public int ChangeCount { get; set; }

        public void IncrementChanges()
        {
            ChangeCount++;
        }
    }
}

Show all inherited properties

Properties

Name	Type	Description	Notes	Default Value
CheckedItem	IValueBinding	Binds the selected value for the radio group.	attribute inner element static value bindable default	null
CheckedValue	Object	Specifies the value represented by this radio button.	attribute inner element static value bindable default	null
ClientIDMode	ClientIDMode	Gets or sets the client ID generation algorithm.	attribute inner element static value bindable default	Static
Content	List<DotvvmControl>	Gets or sets custom label content rendered next to the radio button. Cannot be combined with Text.	attribute inner element static value bindable default	null
DataContext	Object	Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. The DataContext is null in client-side templates.	attribute inner element static value bindable default	null
Enabled	Boolean	Controls whether the radio button can be interacted with.	attribute inner element static value bindable default	True
GroupName	String	Specifies the name attribute of the radio input, used to group radio buttons together.	attribute inner element static value bindable default	null
ID	String	Gets or sets the control client ID within its naming container.	attribute inner element static value bindable default	null
IncludeInPage	Boolean	Gets or sets whether the control is included in the DOM of the page.	attribute inner element static value bindable default	True
Text	String	Gets or sets the plain-text label rendered next to the radio button. Cannot be combined with Content.	attribute inner element static value bindable default	null
Visible	Boolean	Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control.	attribute inner element static value bindable default	True

Events

	Name	Type	Description
	Changed	ICommandBinding	Runs after the selected value changes.

Edit on Github

RadioButton

Usage & Scenarios

Sample 1: Radio Group

Properties

Events

HTML produced by the control

On this page

RadioButton

Usage & Scenarios

Sample 1: Radio Group

Properties

Events

HTML produced by the control

On this page

Information about cookies