Choose a single option from a set of mutually exclusive options.
Preview
code
1○ Small2● Medium3○ LargeUsage
go
1node := models.WidgetNode{2 Type: models.WidgetNodeTypeRadioGroup,3 Name: "size",4 Options: []models.WidgetSelectOption{5 {Label: "Small", Value: "sm"},6 {Label: "Medium", Value: "md"},7 {Label: "Large", Value: "lg"},8 },9 DefaultValue: "md",10}Props
| Name | Type | Description | Default |
|---|---|---|---|
type | "radio-group" | Node type | required |
name | string | Form field name | required |
options | WidgetSelectOption[] | Array of options to render | required |
defaultValue | string | Initial selected value | - |
direction | "row" | "col" | Layout direction of radio items | "row" |
disabled | boolean | Disable all options | false |
required | boolean | Mark as required for form submission | false |
onChangeAction | ActionConfig | Action dispatched when selection changes | - |
ariaLabel | string | Accessible label (falls back to name) | - |
Examples
Horizontal Layout (default)
go
1{2 Type: models.WidgetNodeTypeRadioGroup,3 Name: "plan",4 Options: []models.WidgetSelectOption{5 {Label: "Free", Value: "free"},6 {Label: "Pro", Value: "pro"},7 {Label: "Enterprise", Value: "enterprise"},8 },9}Vertical Layout
go
1{2 Type: models.WidgetNodeTypeRadioGroup,3 Name: "priority",4 Direction: "col",5 Options: []models.WidgetSelectOption{6 {Label: "Low - Not time sensitive", Value: "low"},7 {Label: "Medium - Standard priority", Value: "medium"},8 {Label: "High - Urgent attention needed", Value: "high"},9 },10}With Label
go
1{2 Type: models.WidgetNodeTypeCol,3 Gap: 2,4 Children: []models.WidgetNode{5 {Type: models.WidgetNodeTypeLabel, Value: "Notification Preference", FieldName: "notifications"},6 {7 Type: models.WidgetNodeTypeRadioGroup,8 Name: "notifications",9 Direction: "col",10 Options: []models.WidgetSelectOption{11 {Label: "All notifications", Value: "all"},12 {Label: "Important only", Value: "important"},13 {Label: "None", Value: "none"},14 },15 DefaultValue: "all",16 },17 },18}With Change Action
go
1{2 Type: models.WidgetNodeTypeRadioGroup,3 Name: "theme",4 Options: []models.WidgetSelectOption{5 {Label: "Light", Value: "light"},6 {Label: "Dark", Value: "dark"},7 {Label: "System", Value: "system"},8 },9 OnChangeAction: &models.WidgetAction{10 Type: "theme_changed",11 Payload: map[string]interface{}{},12 },13}Form Data
When submitted, the selected value is included:
json
1{2 "size": "md",3 "notifications": "all"4}TypeScript
typescript
1const node: WidgetNode = {2 type: "radio-group",3 name: "size",4 direction: "col",5 options: [6 { label: "Small", value: "sm" },7 { label: "Medium", value: "md" },8 { label: "Large", value: "lg" },9 ],10 defaultValue: "md",11}When to Use
| Use RadioGroup | Use Select |
|---|---|
| 2-5 options | 5+ options |
| All options visible | Save space |
| Comparing options | Quick selection |
| Important choice | Less important |
Best Practices
- Use for few options - 2-5 items; use Select for more
- Always have a default - Unless intentionally unselected
- Clear labels - Make each option distinct
- Vertical for long labels - Use
direction: "col"when labels are descriptive