Radio Button

RadioButton

RadioButton widget renders a simple Radio button, which can be grouped with other RadioButtons anywhere on the screen with the groupId.

Test in Kitchen Sink (opens in a new tab)

Properties

PropertyTypeDescription
valueanyThe value of this Radio Button. This value should be unique among other RadioButtons with the same groupId.
groupIdstringThe groupId that group a collection of RadioButtons. This is a required field
selectedbooleanWhether this RadioButton should be selected by default

This widget also inherit the following Form Field properties:

PropertyTypeDescription
labelstringLabel for your widget
labelHintstringHint text on your label
requiredbooleanWhether the field is required
enabledbooleanWhether the field is enabled
iconIconInclude an icon on this form field

Styles

PropertyTypeDescription
activeColorColorColor when a radio button is selected
inactiveColorColorColor when a radio button is not selected

This widget also inherits these base styles:

PropertyTypeDescription
visiblebooleanToggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified.
visibilityTransitionDurationnumberSpecify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible.
elevationintegerThe z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. (Minimum: 0, Maximum: 24)
elevationShadowColorColorThe shadow color for the elevation.
elevationBorderRadiusinteger / stringIf the widget has a borderRadius, this should be changed to have the same value. Use with CSS-like notation (1 to 4 integers).
alignmentAlignmentAlign this widget relative to its parent.
stackPositionTopintegerThe distance of the child's top edge from the top of the stack. This is applicable only for Stack's children.
stackPositionBottomintegerThe distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children.
stackPositionLeftintegerThe distance that the child's left edge from the left of the stack. This is applicable only for Stack's children.
stackPositionRightintegerThe distance that the child's right edge from the right of the stack. This is applicable only for Stack's children.
captureWebPointerbooleanApplicable for Web only. When overlaying widgets on top of certain HTML container (e.g., Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget.