Radio Group

Single-selection group with items binding, enum support, and inline layout.

<rhx-radio-group>

Examples

Basic

Notification Frequency

DailyWeeklyMonthlyNever

<rhx-radio-group rhx-label="Notification Frequency"
                   name="frequency"
                   rhx-items="Model.FrequencyOptions" />

Pre-selected

Notification Frequency

DailyWeeklyMonthlyNever

<rhx-radio-group rhx-label="Notification Frequency"
                   name="frequency-pre"
                   value="weekly"
                   rhx-items="Model.FrequencyOptions" />

Enum Binding

Priority

Low PriorityMedium PriorityHigh PriorityCritical

<rhx-radio-group rhx-label="Priority"
                   name="priority"
                   rhx-for="SelectedPriority" />

Inline Layout

Size

Small Medium Large Extra Large

<rhx-radio-group rhx-label="Size" name="size"
                   rhx-inline="true" value="md">
    <rhx-radio value="sm">Small</rhx-radio>
    <rhx-radio value="md">Medium</rhx-radio>
    <rhx-radio value="lg">Large</rhx-radio>
    <rhx-radio value="xl">Extra Large</rhx-radio>
</rhx-radio-group>

With Hint

Plan

FreeProEnterprise

You can change your plan at any time

<rhx-radio-group rhx-label="Plan" name="plan"
                   rhx-hint="You can change your plan at any time"
                   rhx-items="Model.PlanOptions" />

Child Options

Color

Red Green Blue Purple (disabled)

<rhx-radio-group rhx-label="Color" name="color">
    <rhx-radio value="red">Red</rhx-radio>
    <rhx-radio value="green">Green</rhx-radio>
    <rhx-radio value="blue">Blue</rhx-radio>
    <rhx-radio value="purple" rhx-disabled="true">Purple (disabled)</rhx-radio>
</rhx-radio-group>

States

<!-- Disabled group -->
<rhx-radio-group rhx-label="Disabled Group" name="dis-group"
                   rhx-disabled="true" value="weekly"
                   rhx-items="Model.FrequencyOptions" />

<!-- Small size -->
<rhx-radio-group rhx-label="Priority" name="priority-sm"
                   rhx-size="small"
                   rhx-for="SelectedPriority" />

htmx Integration

Pricing Plan

Free Pro Enterprise

Select a plan to see details...

<rhx-radio-group rhx-label="Pricing Plan" name="plan"
                   rhx-inline="true"
                   hx-get="/Docs/Components/RadioGroup?handler=PlanDetails"
                   hx-trigger="change"
                   hx-target="#plan-details"
                   hx-include="this">
    <rhx-radio value="free">Free</rhx-radio>
    <rhx-radio value="pro">Pro</rhx-radio>
    <rhx-radio value="enterprise">Enterprise</rhx-radio>
</rhx-radio-group>
<div id="plan-details">Select a plan to see details...</div>

Properties

Property	Type	Default	Description
`rhx-for`	`ModelExpression`	`-`	ASP.NET Core model expression for two-way binding
`name`	`string`	`-`	The form field name for all radios in the group
`value`	`string`	`-`	The currently selected value
`rhx-label`	`string`	`-`	Group label text
`rhx-hint`	`string`	`-`	Hint text displayed below the group label
`rhx-items`	`List<SelectListItem>`	`-`	Server-side items to render as radio buttons
`rhx-inline`	`bool`	`false`	Display radio buttons in a horizontal row
`rhx-size`	`string`	`medium`	Radio size: small, medium, large
`rhx-disabled`	`bool`	`false`	Whether the entire group is disabled