Checkbox Usage GuidelineBookmark this Guideline Printable Page


RCUI Document Version 5.2.0 for Oracle® Fusion Middleware 11g Release 1 Patch Set 1 (11.1.1.2.0)
Last Updated 24-Feb-2011

A check box is a labeled control that users can select to turn on a setting, or can clear to turn it off.

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
Select Choice Select-Many Choice Alternative to Checkbox for selection of multiple options from a list.
List Box Select-Many List Box Alternative to Checkbox for selection of multiple options from a list box.
SelectShuttle All Alternative to Checkbox for selection of multiple options from a list.
Help Framework Help note window Help method used with check boxes.
Message Framework All Message methods used with check boxes.

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:selectBooleanCheckbox True/false check box.
af:selectManyCheckbox Multi-select check box group.
af:selectItem Multi-select check box group option.

General Principles Bookmark this Heading Return to Top

Purpose:

Turn on or turn off a setting.

Description:

  • A check box consists of a box and a value label.
  • The presence of a check mark in a box indicates that its value is turned on; the absence of a check mark indicates that the value is turned off.
  • When multiple check boxes are presented as a group, users can select none, one, or more than one at the same time.

Enabled state of a check box

Check Box, Enabled State

A form layout with select-many check boxes.

Select-Many Check Boxes in a Form Layout

Usage:

  • Check boxes may be used within or across table cells and within form layouts. A check box may also be used as a stand-alone component.
  • If the check box is used to drive dependent fields, then update the data as soon as the user marks the check box.
  • Label the check box to clearly indicate the meaning of a checked or unchecked state—checked and unchecked states must be antonyms by definition. If labeling cannot describe a complex setting, consider using a radio group instead.
    • For example, in an application that provides users with the option to change the location of an image, a check box labeled "Place image at left of page title" would not be sufficient. In this case, it would be better to use a radio group with the prompt "Location of Page Title Image", and choices of "Left" or "Right."
  • When a check box is toggled frequently, use access keys so keyboard users can quickly select and clear check boxes without using a mouse. See the Keyboard Framework guideline for details.

Types of Check Boxes Bookmark this Heading Return to Top

There are two types of check boxes that differ in behavior:

  • True/false check box
  • Select-many check box
Note: Each type of check box is defined using different ADF components:
  • A true/false check box is defined using af:selectBooleanCheckbox. Multiple true/false check boxes may be placed together to form a check box group.
  • A select-many check box is always implemented within a check box group, using af:selectManyCheckbox to define the group with two or more instances of af:selectItem to specify each check box.

True/False Check Boxes Bookmark this Heading Return to Top

Purpose:

Provide a single option.

Description:

  • A true/false check box may be used alone or in a group of unrelated true/false check boxes.
  • A true/false check box returns a value of true or false when the user selects or clears the check box.
  • A true/false check box sets the value to false if the user submits the check box without selecting a value, and does not generate an error by default.

Example:

A workflow application may provide a check box to display the next notification after the user responds to the current one.

A true/false check box.

True/False Check Box

Usage:

  • Use a true/false check box when displaying:
    • A single check box
    • A small group of unrelated settings that are not required fields.
  • Other components may be dependent on one or more true/false check boxes. In this case, selecting a check box may enable dependent fields that are relevant only in that context.
    • If a true/false check box has dependent fields, they should be enabled or disabled rather than hidden or shown.
    • Place the dependent fields immediately after the check box or indented below it to indicate that those fields are dependent on the check box.
  • See Check Box Groups below for more details.
Note: To implement a single true/false check box as a required field—such as an acknowledgement that users have read a license agreement—product teams should add a validator to ensure the value is set to "true" or "false" as needed.

Select-Many Check Boxes Bookmark this Heading Return to Top

Purpose:

Provide a set of related options.

Description:

  • Select-many check boxes are always used in a check box group. The group must contain at least two related select-many check boxes.
  • Select-many check boxes return a list of selected values when the user selects the check boxes.

Example:

A reporting tool may provide the user with a check box group to specify data members to include in the report.

A group of select-many check boxes with a Required Field Indicator.

Group of Select-Many Check Boxes - Required Field

Usage:

  • Product teams may set a group of multi-select check boxes to be a required field, resulting in an error if the user submits the page without selecting any values.
  • See Check Box Groups below for more details.

Check Box Groups Bookmark this Heading Return to Top

Purpose:

Display two or more check boxes together with a single prompt.

Usage:

  • A check box group must contain at least two check boxes.
  • It is recommended to place no more than seven check boxes within the same check box group. If more options are required, consider using a select-many list box, a select-many choice list or a shuttle.
  • When grouped, check boxes should be should be arranged in a logical order:
    • For example, if a check box 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.
  • Groups containing select-many check boxes may be aligned horizontally, vertically, or in columns.
    • Check boxes are easier to scan vertically rather than horizontally, so it is preferable to align select-many check boxes vertically when space is available. Use horizontal alignment for select-many check boxes only when this placement will improve 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 multi-select check boxes 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.
  • Groups containing true/false check boxes should be aligned vertically, because true/false check boxes typically require long labels to clearly communicate their purpose.

A check box with columnar layout, showing day of the week, with some check boxes checked.

Check Box Group with Columnar Layout

Note: A check box group laid out in 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 check box groups.

Elements Bookmark this Heading Return to Top

The following image shows elements of a check box.

Elements of a check box.

Check Box Elements

Prompt Bookmark this Heading Return to Top

Purpose:

Identifies the purpose of one or more check boxes, so that the user can determine whether to activate or deactivate a given setting.

Usage:

  • Prompts are primarily used with check box groups, but may be used with a true/false check box if the check box value label does not make its function obvious to users. In a table layout, the column header is the prompt.
  • 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 check box or check box group. Place the prompt before the check box or check box group in most cases. If horizontal space is an issue, such as inside an accordion pane, place the prompt above the check box or check box group.
  • Prompts may be visually omitted when the check box value label clearly describes the function of the check box to the product's users. For example, the check box value "Close this window when task is completed" is sufficiently clear for most users, so should not require a prompt. When prompts are visually omitted, add a hidden prompt label for accessibility purposes.
  • Prompts for check box groups should use headline capitalization. See Capitalization in the Language in UI guideline for details.
Note: Implementation of prompts with check box groups depends on the type of check box:
  • Prompts for select-many check box groups are specified using the group-level af:selectManyCheckbox component.
  • Prompts for true/false check box groups are specified using the first instance of af:selectBooleanCheckbox in the group.

Box Bookmark this Heading Return to Top

Purpose:

Enables users to turn the setting on or off.

Usage:

  • Product teams may set the box's value to be either on or off. By default, it is off.
  • The box should be shown as disabled when users are not able to change the state of the check box, but it is necessary to display the check box because it may be enabled in different contexts.
    • For example, when a user sets a document delivery preference, the choices might be "Softcopy" or "Hardcopy". When the user selects "Hardcopy", the carriers "UPS" and "FedEx" check boxes may become enabled; however, when the user selects "Softcopy", the "E-mail" and "Web Site" check boxes may become enabled, and the UPS and FedEx check boxes may become disabled.
  • The box should be shown as read-only when data is displayed in a read-only page, such as a printable page. Read-only data may also be displayed when the user has permission to view the value, but not edit it.
    • For example, when displaying a sales order summary in printable, read-only format, the "Require signature upon delivery" check box would be displayed in its read-only state.

Value Bookmark this Heading Return to Top

Purpose:

Specifies a setting that is turned on (when a check box is checked), or that is turned off (when unchecked).

Description:

  • A check box value is a text label with no character limit.

Usage:

  • Where possible, values should be self-explanatory. If additional information is needed, consider including a tooltip or a Prompt, or providing Help Text. For example, a check box with a value of "Primary Address" could have Help text explaining how to determine the primary address.
  • Check box values should use sentence capitalization. See Capitalization in the Language in UI guideline for details.
  • Check box values should not have sentence-style terminal punctuation, such as a period or question mark.

Required Field Indicator Bookmark this Heading Return to Top

Purpose:

Identifies fields that must be completed before submitting the page. Optional element.

Note: If a field must be completed before page submission, it is recommended to use a select-many choice list or select-many list box instead.

Description:

  • The Required Field Indicator is a text asterisk, *.
  • The Required Field Indicator does not render if a check box group is disabled or read-only.

Usage:

  • True/false check boxes must not be labeled as required fields, since "off" (false) is a valid value.
  • A select-many check box group may be labeled as a required field when users must select one or more options from a list. Nevertheless, selections in a check box group are not mutually exclusive, so check boxes are rarely required fields.
  • Check box groups are intended for selection of multiple values. If the user is required to make a single selection from a group, use a select-one choice list, a select-one list box, or a select radio.
  • If the user is required to make one or more selections from a group, consider using a select-many choice list or select-many list box instead of a required check box group. A check box group may be preferable when the set of values is small, or when the value labels are so long that a semicolon-delimited concatenation of all selections (as one would get with a select-many choice list) would be too difficult to read.
    • For example, an IT system may require employees to update their virus definitions at least twice a week and the user may choose which days to download the updates. In this case, a check box group could list days of the week as options, and the group prompt would be marked as required, since individual check boxes may not be marked as required.
  • 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.

Help Text Bookmark this Heading Return to Top

Purpose:

Provides users with additional information about the check box. Optional element.

Description:

  • Help text may be provided for an individual check box or an entire check box group.
    • For multi-select check box groups, help text may be shown on the entire group, and tooltips may be shown on the individual values.
    • For true/false check box groups, help text may be shown on the individual check boxes, but not on the entire group.
  • See the Help Framework guideline for details.

Usage:

Provide help text for check boxes and check box groups when the label of the check box 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.

Changed Field Indicator Bookmark this Heading Return to Top

Purpose:

Indicates that the value in the check box changed after page submission. Optional element.

Usage:

Same as Select Choice, except:

  • In check box groups, the Changed Field Indicator should be shown when ANY check box in the group is changed.
  • 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.