tencent cloud

RadioGroup
Last updated:2026-02-03 16:46:50
RadioGroup
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.

Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback