AquaRadioButtonGroup

AquaRadioButtonGroup<T> (from scenerystack/sun) lays out an AquaRadioButton per item and manages selection, focus, and pointer areas as a group — this is the same class documented at a higher level on the Radio Button Groups page; this page covers its API in more detail, plus its two orientation-fixing convenience subclasses.

import { VerticalAquaRadioButtonGroup, type AquaRadioButtonGroupItem } from 'scenerystack/sun';
import { Text } from 'scenerystack/scenery';
import { Property } from 'scenerystack/axon';

type Shape = 'circle' | 'square' | 'triangle';
const shapeProperty = new Property<Shape>( 'circle' );

const items: AquaRadioButtonGroupItem<Shape>[] = [
  { value: 'circle', createNode: () => new Text( 'Circle', { fontSize: 18 } ) },
  { value: 'square', createNode: () => new Text( 'Square', { fontSize: 18 } ) },
  { value: 'triangle', createNode: () => new Text( 'Triangle', { fontSize: 18 } ) }
];

const group = new VerticalAquaRadioButtonGroup( shapeProperty, items, {
  spacing: 12
} );

Each item's createNode builds the label shown beside the round button — not the button's own content, which AquaRadioButtonGroup always draws itself. The group extends FlowBox, so it lays out like an HBox/VBox depending on orientation.

HorizontalAquaRadioButtonGroup / VerticalAquaRadioButtonGroup

Both are thin subclasses with the exact same (property, items, options?) constructor as AquaRadioButtonGroup, minus the orientation option (which they fix for you):

Class	Fixes
HorizontalAquaRadioButtonGroup	orientation: 'horizontal'
VerticalAquaRadioButtonGroup	orientation: 'vertical', align: 'left'
AquaRadioButtonGroup	Neither — orientation defaults to 'vertical' but can be set explicitly

import { VerticalAquaRadioButtonGroup } from 'scenerystack/sun';

const verticalGroup = new VerticalAquaRadioButtonGroup( shapeProperty, items, {
  spacing: 12
} );

Reach for the orientation-fixed subclasses for an ordinary fixed-layout group — they read more clearly and remove one option you'd otherwise remember to set; use AquaRadioButtonGroup directly when orientation needs to vary at runtime or your code is generic over it.

Options

Option	Default	Effect
orientation	'vertical'	'horizontal' or 'vertical' layout (fixed on the two subclasses)
spacing	3	Space between adjacent buttons
radioButtonOptions	—	Options applied to every individual AquaRadioButton (radius, selectedColor, xSpacing, …)
touchAreaXDilation / touchAreaYDilation	0 / 0	Dilation for each button's touch area (X ignored when horizontal, Y ignored when vertical)
mouseAreaXDilation / mouseAreaYDilation	0 / 0	Same, for mouse areas
voicingHintResponse	null	Spoken the first time focus lands in the group; falls back to accessibleHelpText

Every item requires a unique value, and the group asserts that property.value matches one of the supplied items' values at construction — there is no "nothing selected" state.

Methods

Method	Effect
getButton( value: T )	Returns the AquaRadioButton<T> instance for a given value

Choosing between Aqua and rectangular groups

Use AquaRadioButtonGroup for a traditional list of labeled options (settings panels, a vertical list of choices); use RectangularRadioButtonGroup when the options are best shown as boxed buttons — icons or short labels the user clicks directly. See the Radio Button Groups overview for the full comparison.