tencent cloud

Tencent Cloud Agent Development Platform

RadioGroup

PDF
Focus Mode
Font Size
Last updated: 2026-02-03 16:46:50

Component Feature

Single-selection component for selecting one value from multiple options, commonly used in gender, status, and data type selection scenes with mutually exclusive options.

Basic Usage

Associate with the form field by name, define the option list in options, and the user can only select one option in the same group.
Template example:
<RadioGroup
name="gender"
options={[
{ label: "Male", value: "male" },
{ label: "Female", value: "female" },
{ label: "Other", value: "other" }
]}
/>
Effect display as follows:



After selecting one option (example selection is "other"), the effect display is as follows:


Attribute Description

Property Name
Type
Description
Default value
name
string
Form Field Name
-
options
RadioOption[]
Option List
-
defaultValue
string
Default Value
-
direction
"row" | "col"
Layout Orientation
"col"
onChangeAction
ActionConfig
Action triggered on value change
-
disabled
boolean
whether to disable the entire group
false
ariaLabel
string
accessibility tag
-
required
boolean
Required
false
theme
"brand" | "primary"
Topic styles
"brand"

RadioOption Object

Property Name
Type
Description
Default value
label
string
Option display text
-
value
string
Option value
-
disabled
boolean
Disable this option or not
false
Note:
Marked with required attribute.


Help and Support

Was this page helpful?

Help us improve! Rate your documentation experience in 5 mins.

Feedback