Radio Group

Guidelines
React API Reference
Blazor API Reference

Radio groups allow users to select exactly one option from a set of mutually exclusive choices, providing a clear and intuitive way to handle single-selection scenarios.

Guidance

Aspect	Best Practice
Usage	Use for mutually exclusive options where only one selection is allowed. Ideal for 2-7 options that users need to compare.
Content	Use clear, concise labels for each option. Group related choices logically and provide descriptive group labels when needed.
Behavior	Always have one option selected by default when possible. Provide immediate visual feedback for selection changes.
States	Clearly indicate selected, unselected, disabled, and focused states. Ensure states are distinguishable across different accessibility needs.
Feedback	Use consistent visual indicators (filled circles) for selections. Provide clear focus indicators for keyboard navigation.
Examples	Payment methods, shipping options, account types, notification preferences, or any scenario requiring exactly one choice.

Best Practices

Logical Grouping: Group related options together with clear labels and appropriate spacing.
Default Selection: Pre-select the most common or recommended option when appropriate.
Clear Labels: Use descriptive, scannable labels that clearly differentiate between options.
Consistent Layout: Maintain consistent spacing and alignment between radio buttons and labels.
Keyboard Navigation: Support arrow key navigation between options within the group.
Accessible Design: Provide proper ARIA attributes and ensure adequate color contrast.

Do’s and Don’ts

Do

Use for mutually exclusive choices (only one selection allowed).
Provide clear, descriptive labels for each option.
Pre-select a default option when it makes sense.
Keep the number of options manageable (2-7 typically).

Don't

Use for multiple selections (use checkboxes instead).
Leave all options unselected when a choice is required.
Use overly long labels that are hard to scan.
Mix radio groups with other input types in confusing ways.

Additional Guidance

Psychological Impact:
- Decision Clarity: Radio groups make it clear that only one option can be selected, reducing decision complexity.
- Comparison Facilitation: Seeing all options at once helps users make informed comparisons.
- Confidence Building: Clear visual feedback for selections builds user confidence in their choices.

Import

import {
  RadioGroup,
  RadioGroupItem
} from '@strongtie/design-system/radiogroup';

Usage

<RadioGroup defaultValue="option-1">
<div className="radio-group-container">
    <div className="radio-item-container">
        <RadioGroupItem
        id="option-1"
        value="option-1"
        />
        <Label htmlFor="option-1">
        Option 1
        </Label>
    </div>
    <div className="radio-item-container">
        <RadioGroupItem
        id="option-2"
        value="option-2"
        />
        <Label htmlFor="option-2">
        Option 2
        </Label>
    </div>
    <div className="radio-item-container">
        <RadioGroupItem
        id="option-3"
        value="option-3"
        />
        <Label htmlFor="option-3">
        Option 3
        </Label>
    </div>
</div>
</RadioGroup>

`<RadioGroup>` Props

disabled

boolean

default:"false"

If true, the radio group will be disabled.

required

boolean

default:"false"

If true, the radio group is required.

name

string

The name of the radio group.

value

string

The controlled value of the radio group.

defaultValue

string

The default value of the radio group.

onValueChange

function

Callback function that is called when the value changes.

orientation

"horizontal" | "vertical"

default:"horizontal"

The orientation of the radio group.

dir

"ltr" | "rtl"

default:"ltr"

The direction of the radio group.

loop

boolean

default:"true"

If true, the radio group will loop.

asChild

boolean

default:"false"

If true, the radio group will render as a child component.

`<RadioGroupItem>` Props

value

string

The value of the radio group item.

disabled

boolean

default:"false"

If true, the radio group item will be disabled.

required

boolean

default:"false"

If true, the radio group item is required.

asChild

boolean

default:"false"

If true, the radio group item will render as a child component.

Usage Examples

<RadioGroup defaultValue="option-1">
  <div className="radio-group-container">
    <div className="radio-item-container">
      <RadioGroupItem id="option-1" value="option-1" />
      <Label htmlFor="option-1">Option 1</Label>
    </div>
    <div className="radio-item-container">
      <RadioGroupItem id="option-2" value="option-2" />
      <Label htmlFor="option-2">Option 2</Label>
    </div>
    <div className="radio-item-container">
      <RadioGroupItem id="option-3" value="option-3" />
      <Label htmlFor="option-3">Option 3</Label>
    </div>
  </div>
</RadioGroup>

Styling Classes

The following CSS classes are applied by the Radio Group components:

radio-group – Root container for the radio group with proper ARIA attributes
radio-group-item – Individual radio button input element
radio-group-item-indicator – Container for the selected state indicator

For more examples, visit the Storybook.

Example

    <StudsRadioGroup @bind-Value=@value TValue="int">
        <Items>
            <StudsRadio Text="Orders" Value="1" />
            <StudsRadio Text="Employees" Value="2" />
            <StudsRadio Text="Customers" Value="3" />
        </Items>
    </StudsRadioGroup>

`<StudsRadioGroup>` Parameters

Disabled

bool

default:"false"

If true, the radio group will be disabled.

Name

string

The name of the radio group.

Value

string

The controlled value of the radio group.

DefaultValue

string

The default value of the radio group.

ValueChanged

EventCallback<int>

Event callback that is triggered when the value changes.

ValueProperty

string

Gets or sets the value property.

TextProperty

string

Gets or sets the text property.

DisabledProperty

string

Gets or sets the disabled property.

VisibleProperty

string

Gets or sets the visible property.

Data

IEnumerable<T>

Gets or sets the data source.

Orientation

"Horizontal" | "Vertical"

default:"Orientation.Horizontal"

The orientation of the radio group.

Items

RenderFragment

Gets or sets the items of the radio group.

Change

EventCallback<int>

Event callback that is triggered when the value changes.

ValueExpression

Expression<Func<int>>

The expression that represents the value.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

`<StudsRadioGroupItem>` Parameters

Text

string

The text of the radio group item.

TValue

The type of the value.

Disabled

bool

default:"false"

If true, the radio group item will be disabled.

InputAttributes

Dictionary<string, object>

The attributes of the input element.

Usage Examples

<StudsRadioGroup @bind-Value="selectedValue" TValue="int">
    <Items>
        <StudsRadio Text="Orders" Value="1" />
        <StudsRadio Text="Employees" Value="2" />
        <StudsRadio Text="Customers" Value="3" />
    </Items>
</StudsRadioGroup>

@code {
    int selectedValue = 1;
}

Styling Classes

The following CSS classes are applied by the Radio Group components:

radio-button-list – Root container for the radio group
radio-button-list.-horizontal – Horizontal layout modifier
radio-button-list.-vertical – Vertical layout modifier
radiobutton.-wrapper – Individual radio item wrapper
radiobutton.-button – Clickable radio button container
radiobutton.-accessible-helper – Hidden accessibility helper containing actual input
radiobutton.-box – Visual radio button representation
radiobutton.-box.-active – Selected state styling
radiobutton.-icon – Icon element for selected state indicator
radiobutton.-label – Text label for radio option
radiobutton.-template – Custom template content wrapper

For more examples, visit the Storybook.

Getting Started

Foundations

Components

Integration Guides

Content

Guidance

Best Practices

Do’s and Don’ts

Do

Don't

Additional Guidance

`<RadioGroup>` Props

`<RadioGroupItem>` Props

Usage Examples

Styling Classes

`<StudsRadioGroup>` Parameters

`<StudsRadioGroupItem>` Parameters

Usage Examples

Styling Classes

Getting Started

Foundations

Components

Integration Guides

Content

​Guidance

​Best Practices

​Do’s and Don’ts

Do

Don't

​Additional Guidance

​<RadioGroup> Props

​<RadioGroupItem> Props

​Usage Examples

​Styling Classes

​<StudsRadioGroup> Parameters

​<StudsRadioGroupItem> Parameters

​Usage Examples

​Styling Classes

Guidance

Best Practices

Do’s and Don’ts

Additional Guidance

`<RadioGroup>` Props

`<RadioGroupItem>` Props

Usage Examples

Styling Classes

`<StudsRadioGroup>` Parameters

`<StudsRadioGroupItem>` Parameters

Usage Examples

Styling Classes