Select Radio Usage Guideline Bookmark this Guideline Printable Page


RCUI Document Version 5.1.0 for Oracle® Fusion Middleware 11g Release 1 Patch Set 1 (11.1.1.2.0)
Last Updated 22-Feb-2010

The Select Radio component is used to make a selection from a set of mutually exclusive options. Only one radio button in a group may be set at a time.

Guideline Contents

Note: Images in this guideline are provided as a general reference, and may not be exact representations of FusionFX pages.

Related Guidelines

Guideline Section For Information About
Checkbox All Equivalent function for selection of options that are not mutually exclusive.
SelectOneListBox All Equivalent function for selection from a list of options.
SelectOneChoice All Equivalent function for selection from a list of options.
Help Framework Help note window Help method used with Radio groups.
Message Framework All Message methods used with Radio groups.

Related ADF Elements

Refer to the ADF Faces Rich Client demos page to find demos and tag documentation for the ADF elements related to this component:

ADF Element Notes
af:selectBooleanRadio True/False Radio button.
af:selectOneRadio Single-select Radio group.
af:selectItem Single-select Radio group option.

General Principles Bookmark this Heading Return to Top

Purpose:

Select an option from a set of mutually exclusive values.

SelectRadio group elements: the radio buttons, the prompt, and can feature the Changed Field Indicator and Help Text icon.

Select Radio Group

Usage:

  • Radio groups may be used within or across table cells, and within form layouts. A Radio group may also be used as a stand-alone component, but a radio button should not be used as a stand-alone component.
  • Radio groups should have at least two options. If a single setting is needed, use a check box or two radio buttons (one for each state).
  • Use Radio groups when providing mutually exclusive choices, with informative labels for each choice.
  • It is recommended to use a check box rather than a Radio group when presenting simple "Yes" and "No" choices. For example, when presenting a choice list of days of the week for a delivery, list the weekdays in a checkbox group.

Two list groups, one demonstrating more appropriate use of a checkbox compared to  use of a radio group for the particular choices being presented. In this case, when the choice list is for choosing a delivery day, it would be incorrect to present multiple radio buttons for each day of the week, assigning a 'yes' and a 'no' radio button to each for the user to select from; this would require the user to fill in a choice of yes or no for each day of the week. Instead, in the case of a user 'yes or no' choice such as this, it would be better to present a checkbox for each day of the week and let the user select only the day she wants the delivery to be made.

Generally Use Checkbox Group for "Yes/No" Choices

  • However, teams may use Radio groups to present simple "Yes" and "No" choices when:
    • The page contains a series of "Yes/No" questions in a questionnaire or survey format, and Radio groups are commonly used to respond to other questions. See the image below.
    • When a "Yes" or "No" response is required for successful page submission, and the list of response choices cannot be combined with related choices in a check box group. See the image above.

In this example of a 'yes/no' choice being presented to a user in the form of a survey, 'have you ordered from us before?' is more appropriately presented with a radio group than to present a checkbox with the prompt 'Ordered from us before', in which the user would have to select the checkbox if the answer is 'yes'.

Use Case for Select Radio to Show "Yes/No" Choices

  • It is recommended to place no more than five options in a Radio group. If more options are needed, consider using a select-one choice list or select-one list box instead.
  • Selecting a radio button may enable dependent fields that are relevant only in that context. See Radio Groups and Dependent Fields below for details.
  • When a Radio group is used frequently, provide access keys so keyboard users can quickly change selections without using a mouse. See the Keyboard Framework guideline for details.

Types of Radio Groups Bookmark this Heading Return to Top

There are two types of Radio groups that look alike but differ in behavior.

  • Single-Select Radio Group:
    • A single-select Radio group returns the selected value, and can be set as a required field, resulting in an error if the user submits the page without selecting a value.
    • Single-select Radio groups do not support nested fields beneath a radio button.
    • Single-select Radio groups cannot be distributed across table cells, but only within cells.
  • True/False Radio Group
    • A true/false Radio group returns a value of true or false when a radio button is selected or cleared.
    • If the user submits a group of true/false radio buttons without selecting a value, the value of each button is set to "false". Consequently, "false" is a valid value, so true/false radio buttons should not be set as required fields.
Note: Each type of Radio group is defined using different ADF components:
  • A single-select Radio group is defined using af:selectOneRadio with two or more instances of af:selectItem to specify radio buttons.
  • A true/false Radio group is defined using two or more instances of af:selectBooleanRadio.

Radio Group Layout Bookmark this Heading Return to Top

Radio groups may be aligned horizontally, vertically, or in columns.

  • Radio groups are easier to scan vertically rather than horizontally, so it is preferable to align Radio groups vertically when space is available. Use horizontal alignment for Radio groups only when this placement improves the layout of the page.
  • Vertical alignment should be used when the label text is lengthy, and may be used in either a single-column or multi-column form layout.
  • Horizontal alignment should be used only when label text is short. This layout works best when the form is in a single column.
  • Columnar layout should be used when Radio groups have short value labels that are well-known to the product's users. For example, days of the week are very familiar and can be easily read as a group, so they may be placed in a columnar layout.

Horizontally aligned radio group, in which the radio button is followed by the choice list item

Horizontally Aligned Radio Group

Vertically aligned radio group, in which the radio buttons are aligned vertically, and each has the choice list to the right of the radio button.

Vertically Aligned Radio Group

Radio group with columnar layout, in which there are three columns of radio buttons, each with its list option to the right of the button

Radio Group with Columnar Layout

Note: A Radio group laid out in multiple columns can be hard to read as a group unless it is correctly implemented. Users may not identify all the items within a group, or may mistake the columns as separate Radio groups.

Radio Groups and Dependent Fields Bookmark this Heading Return to Top

A true/false Radio group may contain other web widgets that are dependent on one or more radio buttons. In the following image, selecting a radio button enables dependent fields that are relevant only in that context. For example, in a Radio group labeled "Age", selecting a radio button with the label "10-18" could enable fields for parent contact information.

  • Place dependent fields immediately after the controlling radio button or indented below it to indicate that they are dependent on that radio button.
  • It is recommended to disable the dependent fields and enable them only when the controlling radio button is selected. This allows users to see the options associated with each radio button at a glance.
  • Avoid using dependent fields to control other dependent fields; for instance, using a dependent choice list to control dependent text fields.
  • When placing dependent fields beneath multiple radio buttons, the resulting Radio group may become so spread out that it loses its visual coherency. If no other design solution exists, then product teams may hide all dependent fields in that Radio group except those associated with the selected radio button.
Radio group combined with dependent fields that the user will fill in, depending upon whether she selected the radio button associated with the fields. In this case, if a user clicks the radio button 'Age 10-18', then the user would need to fill in the dependent fields with parents' name and contact information.

Radio Group with Dependent Fields

Elements Bookmark this Heading Return to Top

The following image shows elements of a Radio group.

Select Radio Group Elements, as described in the subsequent sections.

Radio Group Elements

Prompt Bookmark this Heading Return to Top

Purpose:

Identifies the purpose of a Radio group.

Usage:

  • Use of prompts is strongly recommended for Radio groups in a form layout. In a table layout, the column header is the prompt.
  • Prompts are not recommended for individual radio buttons within a group.
  • There is no limit to the number of characters allowed in the prompt, but product teams must make sure that the layout allows for prompts to become up to 100 percent longer in translation.
  • Prompts may be placed before or above a Radio group. Place the prompt before the Radio group in most cases. If horizontal space is an issue, such as inside an accordion pane, place the prompt above the Radio group.
  • Prompts may be omitted when:
    • The Radio group's value labels clearly describe the function of the Radio group to the product's users, or
    • A Radio group is placed below a header, and the header text serves both as the prompt for the Radio group and as the header for other components and subsections below it.
  • Prompts for Radio groups should use headline capitalization. See Capitalization in the Language in UI guideline for details.
Note: Implementation of prompts depends on the type of Radio group:
  • Prompts for single-select Radio groups are specified using the group-level af:selectOneRadio component.
  • Prompts for true/false Radio groups are specified using the first instance of af:selectBooleanRadio in the group.

Button Bookmark this Heading Return to Top

Purpose:

Turns a Radio option on and turns any other selected option off.

Usage:

  • Product teams may set a Radio group to have a single selection or no selection. By default, it has no selection.
    • Once the user clicks a radio button, clicking again on the same option does not de-select it. Clicking another option selects that other option.
    • If it is important to provide an option to return a Radio group to an unselected state, consider providing a Clear button at the form level to reset the Radio group to none selected. Alternatively, consider providing an additional option of "None" or an equivalent term.
  • A single radio button or a radio button group should be shown as disabled when the choice is not available to the user, but is necessary to display the choice because it may become available in different contexts.
    • For example, on a payment page, the choices "American Express", "Visa", and "MasterCard" may be disabled until the user selects a payment type of "Credit Card".
  • The Radio group button should be shown as read-only when data is displayed in a read-only page, such as a printable page, and a value has been selected. Read-only data may also be displayed when the user has permission to view the selected value, but not edit it. When the Radio group is read-only, the button does not display and the selected value is displayed as plain text.
    • For example, if a sales order summary includes a "Shipping Method" Radio group and the user decides to print the page, the selected Shipping Method option would be displayed as read-only text.

Value Bookmark this Heading Return to Top

Purpose:

Specifies the setting to be turned on or off.

Usage:

  • A Radio group value is a text label. There is no character limit.
  • If a Radio group is defined and users have the option to make no selection, use a value defined as "None" or "None of the above".
  • Where possible, values should be self-explanatory. If additional information is needed, consider including a tooltip or providing Help. For example, a Radio group with a value of "Primary Address" could have Help text explaining how to determine the primary address.
  • The sequence of values in a Radio group should be arranged in a logical order, so users can scan them quickly:
    • For example, if a Radio group contains values that represent different phases of a process, such as the phases of a publishing cycle (Draft, Internal Review, External Review, Editorial Review, and Published), display the values in sequence.
    • If the values represent value increments, such as smaller to larger, group them from smallest to largest in most cases, unless the opposite order makes more sense in a specific context.
    • If the values have some other generally recognized order, follow that order.
    • If there is no other logical order to the values, list them alphabetically or numerically; however, note that alphabetical ordering does not make sense in some languages, particularly Asian languages.
  • Radio group values should use sentence capitalization. See Capitalization in the Language in UI guideline for details.
  • Radio group values should not have sentence-style terminal punctuation, such as a period or question mark.
Note: When the choice in a Radio group may have significant consequences, such as in administration of concurrent processes, it is recommended to provide tooltips and additional Help if needed to explain the meaning of Radio group values.

Required Field Indicator Bookmark this Heading Return to Top

Purpose:

Identifies fields that must be completed before submitting the page.

Description:

  • The Required Field Indicator is a text asterisk, *.
  • The Required Field Indicator does not appear if a Radio group is disabled or read-only.
  • ADF provides ALT text and tooltips to indicate required fields. Product teams may additionally provide key notation to define the Required Field Indicator. Refer to Key Notation in the Headers guideline for information regarding usage.

Usage:

Same as Select-One Choice List, except:

  • If the user is required to make a single selection from a group, consider using a select-one choice list or list box instead of a required radio button group. A radio button group may be preferable when the set of values is small.
    • For example, an HR system may require employees to receive a reminder once a week for their open task list and the user may choose which day to receive the reminder. In this case, a radio button group could list days of the week as options, and the group prompt would be marked as required, since individual radio buttons may not be marked as required.
  • Required field indicators should not be used with true/false Radio groups. See Types of Radio Groups for details.
  • Individual radio buttons must not be labeled as required fields, since "off" (false) is a valid value. A single-select radio button group may be labeled as a required field when users must select an option from a list.
  • Do not use the "None" option in a Radio group that is a required field.
  • Radio button groups are intended for selection of a single value. If the user is required to make multiple selections from a group, use a select-many choice list, a select-many list box, or a check box group.

Changed Field Indicator Bookmark this Heading Return to Top

Purpose:

Indicates that the value in the Radio group changed after page submission.

  • ADF provides ALT text and tooltips to indicate changed fields. Product teams may additionally provide key notation to define the Changed Field Indicator. Refer to Key Notation in the Headers guideline for information regarding usage.

Usage:

Same as the Select-One Choice List.

Help Text Bookmark this Heading Return to Top

Purpose:

Provides users with additional information about the Radio group.

Description:

Help may be provided for an individual radio button or an entire Radio group:

  • For single-select Radio groups, Help text may be shown on the entire group and tooltips may be shown on the individual buttons.
  • For true/false Radio groups, Help text may be shown on the individual buttons, but not on the entire group.
  • See the Help Framework guideline for details.

Usage:

Provide Help for Radio groups and radio buttons when the label of the radio button does not provide enough detail to explain the purpose of the selection. For example, some database management settings may not be clear for administrators who have little experience with the application.