Radio Group

For more examples, visit the Storybook.

Example

<StudsRadioGroup defaultValue="option-1"
>
    <div className="radio-group-container">
        <div className="radio-item-container">
            <StudsRadioGroupItem
            id="option-1"
            value="option-1"
            />
            <label htmlFor="option-1">
            Option 1
            </label>
        </div>
        <div className="radio-item-container">
            <StudsRadioGroupItem
            id="option-2"
            value="option-2"
            />
            <label htmlFor="option-2">
            Option 2
            </label>
        </div>
        <div className="radio-item-container">
            <StudsRadioGroupItem
            id="option-3"
            value="option-3"
            />
            <label htmlFor="option-3">
            Option 3
            </label>
        </div>
    </div>
</StudsRadioGroup>

`<StudsRadioGroup>` 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.

`<StudsRadioGroupItem>` 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.

For more examples, visit the Storybook.

Example

<StudsRadioGroup defaultValue="option-1"
>
    <div className="radio-group-container">
        <div className="radio-item-container">
            <StudsRadioGroupItem
            id="option-1"
            value="option-1"
            />
            <label htmlFor="option-1">
            Option 1
            </label>
        </div>
        <div className="radio-item-container">
            <StudsRadioGroupItem
            id="option-2"
            value="option-2"
            />
            <label htmlFor="option-2">
            Option 2
            </label>
        </div>
        <div className="radio-item-container">
            <StudsRadioGroupItem
            id="option-3"
            value="option-3"
            />
            <label htmlFor="option-3">
            Option 3
            </label>
        </div>
    </div>
</StudsRadioGroup>

`<StudsRadioGroup>` 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.

`<StudsRadioGroupItem>` 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.

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.

Getting Started

Foundations

Components

Integration

Content

`<StudsRadioGroup>` Props

`<StudsRadioGroupItem>` Props

`<StudsRadioGroup>` Props

`<StudsRadioGroupItem>` Props

`<StudsRadioGroup>` Parameters

`<StudsRadioGroupItem>` Parameters

Getting Started

Foundations

Components

Integration

Content

​<StudsRadioGroup> Props

​<StudsRadioGroupItem> Props

​<StudsRadioGroup> Props

​<StudsRadioGroupItem> Props

​<StudsRadioGroup> Parameters

​<StudsRadioGroupItem> Parameters

`<StudsRadioGroup>` Props

`<StudsRadioGroupItem>` Props

`<StudsRadioGroup>` Props

`<StudsRadioGroupItem>` Props

`<StudsRadioGroup>` Parameters

`<StudsRadioGroupItem>` Parameters