Radio

The Radio widget is a single-select button that lets you pick exactly one of several options.
Select one radio in a group and the rest clear automatically.

Definition and role

The Radio widget draws a circular selection button that keeps only one value selected inside a group (groupId). Radios that share a groupId form one selection group — pick one, and the group value (groupValue) changes to that radio's value while the rest clear.

• Category: Contents
• Default group value: none (empty string)

Features

Feature	Description
Single selection	Only one value stays selected inside a groupId group. Select another radio and the previous selection clears automatically.
Group management	Use groupId to tie radios into one group, and groupValue to share the currently selected value.
Clearing a selection	Turn toggleable on to let a reader tap an already-selected radio again to clear it.
Action on selection	When the selection changes, the action (logic or script) wired to onTap runs.
Color and focus	Set the selected color (activeColor), the focus color (focusColor), and the hover color (hoverColor), plus autofocus.

How to use

1. Open the Contents category in the left widget palette.
2. Drag and drop the Radio item onto the canvas.
3. In the Properties panel on the right, give every radio you want in one group the same groupId.
4. Give each radio a different value.
5. If you need to, wire an action to onTap to run on selection, and adjust the appearance, such as the selected color.

Properties

Property	Description	Default	Value / Type
groupId	Radio group identifier. Radios that share the same value form one selection group.	Empty string	String
value	This radio's value. When it's selected, the group value is set to this value.	Empty string	String
groupValue	The group's currently selected value. When it matches value, the radio appears selected.	Empty string	String
toggleable	Whether tapping an already-selected radio again clears the selection	Off (false)	true / false
activeColor	Color when selected	Not set	Color
focusColor	Color in the focused state	Not set	Color
hoverColor	Color on hover	Not set	Color
materialTapTargetSize	Size of the tap target area	Not set	padded, shrinkWrap
visualDensity	Visual density — how tightly the parts are spaced	-4, -4 (compact)	Visual density value
focusNode	Focus node	Not set	Focus node
autofocus	Whether to take focus automatically when the screen opens	Off (false)	true / false

Notes and tips

warning

To tie radios into the same group, give them an identical groupId. Radios with different groupId values act as independent groups, so several of them can end up selected at the same time.

tip

Inside one group, give each radio a different value so the selections stay distinct. Turn toggleable on to let a reader tap a selected item again to clear it.

Learn more

tip

For the complete Widget Control (Property, Method, and Event) that drives this widget from a script, visit Radio Widget Control.