Skip to main content

RadioButtonGroup

Open in ChatGPT
23.01
Java API

The RadioButtonGroup manages a collection of RadioButton components. Only one RadioButton can be selected in a RadioButtonGroup. When a user checks a new radio button, the previously selected one in the group is automatically unchecked.

Show Code

RadioButtonGroup rendering

The RadioButtonGroup component doesn't render an HTML element. It only provides logic to make RadioButton components behave as a group rather than individually.

Adding and removing RadioButton components​

You can include RadioButton components in the RadioButtonGroup constructor to create a group out of the provided components. To add or remove a RadioButton from an existing RadioButtonGroup, use the add() or remove() methods.

Getting the Group of a RadioButton

The RadioButton component has the getButtonGroup() method, which returns the RadioButtonGroup it belongs to, or null if it doesn’t have a group.

Nesting 25.11​

Like other components, you can nest a RadioButtonGroup within a container, so you don't have to directly add each individual RadioButton.

RadioButton agree = new RadioButton("Agree");
RadioButton neutral = new RadioButton("Neutral");
RadioButton disagree = new RadioButton("Disagree");

RadioButtonGroup group = new RadioButtonGroup("choices", agree, neutral, disagree);

Fieldset fieldset = new Fieldset("Options");
fieldset.add(group);

Using RadioButtonGroupChangeEvent​

Each RadioButton can have its own event listener to detect when a user toggles it. However, one advantage of using a RadioButtonGroup is that you can use a single event listener that responds to all the radio buttons in the group with the RadioButtonGroupChangeEvent.

Adding event listeners to each RadioButton

agree.onValueChange(e -> changeEvent());
neutral.onValueChange(e -> changeEvent());
disagree.onValueChange(e -> changeEvent());

Adding a single event listener to the RadioButtonGroup

RadioButtonGroup group = new RadioButtonGroup("choices", agree, neutral, disagree);
group.onChange(e -> changeEvent());

The following sample from Drawer Placement uses the RadioButtonGroupChangeEvent to automatically change the placement of the Drawer component:

Show Code

Naming​

The name attribute in a RadioButtonGroup groups related RadioButtons together, allowing users to make a single choice from the options provided and enforcing exclusivity among the RadioButtons. The name of a group isn't reflected in the DOM, however, and is a convenience utility for the Java developer.