• Home
    • View
    • Login
    This page
    • Normal
    • Export PDF
    • Export Word
    • Attachments
    • Page Information

    Loading...
  1. Dashboard
  2. OpenJFX
  3. Main
  4. Projects and Components
  5. Controls
  6. User Experience Specifications
  7. RadioButton User Experience Documentation

RadioButton User Experience Documentation

  • Created by Jindrich Dinga, last modified on Sep 19, 2013

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 ButtonAction
State: ONNo action is performed.
State: OFFRadio 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 ButtonAction
State: ONNo action is performed.
State: OFFRadio 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/RIGHTMove 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/LEFTMove 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 button in the group and select that button.
DOWN/RIGHTMove 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 in the group and select that button.
SPACEBARSelect the focused radio button.
TABWhen 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-TABWhen 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 group. Pressing Shift-Tab again moves focus out of the group to the previous focusable control.

Move focus to previous focusable control.
Overview
Content Tools
ThemeBuilder
  • No labels

Terms of Use
• License: GPLv2
• Privacy • Trademarks • Contact Us

Powered by a free Atlassian Confluence Open Source Project License granted to https://www.atlassian.com/software/views/opensource-community-additional-license-offer. Evaluate Confluence today.

  • Kolekti ThemeBuilder Powered by Atlassian Confluence 8.5.22
  • Kolekti ThemeBuilder printed.by.atlassian.confluence
  • Report a bug
  • Atlassian News
Atlassian
Kolekti ThemeBuilder EngineAtlassian Confluence
{"serverDuration": 253, "requestCorrelationId": "f11e58402c7ddbe3"}