Checkbox Set

amx:selectManyCheckbox

The Checkbox Set component is similar to Radio Set component, but allows the user to select multiple items from a list. This component has the following elements:

Label: An optional label for the component.
Container: The container is a type of a List.
Item: The row is a type of list item.
Text: Text that describe the item.
Checkbox: Android displays a box to the right of each item for selection. iOS does not display this box.
Checkmark: Android displays a checkmark in the box to indicate selection. iOS displays just the checkmark.

Appearance

Appearance characteristics for this component.

Label: An optional label may be displayed.
State: Supports enabled, pressed, disabled and read-only.
Selection: Supports selected and unselected rows.
Background: Supports white or light gray colors.
Read-Only: The selected item is bold text.
Rendered: This component can be shown or hidden.

Behavior

Common behaviors for this component.

Selection: Supports single selection, multiple sections or no selection. No selection is the default.
Tap: When user taps a row, the row is selected. Tapping the row again will de-selects it.
Scrolling: The rows in this component scroll vertically.
Required: Can be set as a required field, resulting in an error if the user submits the page without selecting a value.
Nesting: Does not support nested fields beneath an option.

Usage

Usage guidelines for this component.

There should be at least two rows in this component.
This component should be used when there are multiple choices to be selected.
This component should be displayed 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.
On a tablet this component may not display well if it span the whole landscape orientation.
On a phone this component may need to display on a new page, due to length of the list.
Use Switch or Checkbox when presenting simple Yes or No choices.
If you need to reset, provide an option to return to the unselected view or an additional 'None' option.
The component 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 component is read-only, the button does not display and the selected value is displayed as bold text.

Sample

AMX sample code for this component.

 <amx:selectManyCheckbox label="Enabled" id="smc1">

    <amx:selectItem value="true" label="One"/>

    <amx:selectItem label="Two"/>

    <amx:selectItem label="Three"/>

    </amx:selectManyCheckbox>

    

    <amx:selectManyCheckbox label="Disabled" id="smc3" disabled="true">

    <amx:selectItem value="true" label="One"/>

    <amx:selectItem label="Two"/>

    <amx:selectItem label="Three"/>

    </amx:selectManyCheckbox/>

    

    <amx:selectManyCheckbox label="Read-Only" id="smc2" readOnly="true">

    <amx:selectItem value="true" label="One"/>

    <amx:selectItem label="Two"/>

    <amx:selectItem label="Three"/>

    </amx:selectManyCheckbox>

Used On: Phone, Tablet
Also Called: Check List
Related Components: Checkbox, Radio Button List
Resources: None

Fig 1. iOS Checkbox Set

Fig 2. Android Checkbox Set