RadioButton User Experience Documentation
Author: Jindrich Dinga
1. Introduction
This document is the user experience specification for JavaFX RadioButton control.
2. Interaction Design
A radio button represents an exclusive choice within a set of related options. Within a set of radio buttons, only one button can be ON at any given time. The following figure shows active radio buttons and inactive radio buttons in both ON and OFF states.
Figure 1 Radio Buttons
When users click a radio button, its setting is always set to ON. An inner filled circle within the round button graphic indicates that the setting is selected. If another button in the set has previously been selected, its state changes to OFF. When a radio button is unavailable, users cannot change its setting.
A mnemonic should be provided for each radio button choice, or place a mnemonic on the label for the radio button group.
Display radio button text to the right of the graphic unless the application is designed for locales with right-to-left writing systems, such as Arabic and Hebrew. In those locales, place the text to the left of the graphic.
Radio Button Menu Items
A radio button menu item is a menu item that appears with a radio button next to it to represent an OFF or ON setting. Each radio button menu item offers users a single choice within a set of radio button menu items, as illustrated in the following set of alignment options.
Figure 2 Radio Button Menu Items
Note that there is no difference in behavior of radio buttons on Desktop and Embedded, except that there is no mnemonic support on Embedded platforms.
3. Navigation
The following chapters describe how radio buttons are activated. Navigation for radio button menu items is described in the Menu UE Spec.
Mouse Support
The following table describes actions that are performed when users click on:
Radio Button Action
State: ON No action is performed.
State: OFF Radio button is set to ON. All other radio buttons are set to OFF.
Touch Support The following table describes actions that are performed when users tap on:
Radio Button Action
State: ON No action is performed.
State: OFF Radio button is set to ON. All other radio buttons are set to OFF.
Directional Keys + OK/Select Support
The following table describes actions that are performed when a radio button is focused and users press the following keys:
Action
UP/DOWN/LEFT/RIGHT Move focus up/down/left/right.
OK/SELECT [Focused radio button is set to ON] No action is performed.
[Focused radio button is set to OFF] Radio button is set to ON. All other radio buttons are set to OFF.
Keyboard Support
The following table describes actions that are performed when a radio button is focused and users press the following keys:
Action
UP Move focus to the previous radio button in the group and select that button. If focus is on the first radio button, move focus to the last radio /LEFT button in the group and select that button.
DOWN Move focus to the next radio button in the group and select that button. If focus is on the last radio button, move focus to the first radio button /RIGHT in the group and select that button.
SPACE Select the focused radio button. BAR
TAB When users tab into the group, focus goes to the selected button. If no radio button is selected, focus goes to the first radio button in the group. Pressing Tab again moves focus out of the group to the next focusable control.
Move focus to next focusable control.
SHIFT- When users Shift-Tab into the group, focus goes to the selected button. If no radio button is selected, focus goes to the last radio button in the TAB group. Pressing Shift-Tab again moves focus out of the group to the previous focusable control.
Move focus to previous focusable control.