Amazon SageMaker
Developer Guide

crowd-checkbox

A UI component that can be checked or unchecked allowing a user to select multiple options from a set.

Attributes

The following attributes are supported by this element.

checked

A Boolean switch that, if present, displays the check box as checked.

disabled

A Boolean switch that, if present, displays the check box as disabled and prevents it from being checked.

name

A string that is used to identify the answer submitted by the worker. This value will match a key in the JSON object that specifies the answer.

required

A Boolean switch that, if present, requires the worker to provide input.

value

A string used as the name for the check box state in the output. Defaults to "on" if not specified.

Element Hierarchy

This element has the following parent and child elements.

  • Parent elements: crowd-form

  • Child elements: none

Output

Provides a JSON object. The name string is the object name and the valuestring is the property name for a Boolean value based on the check box state; true if checked, false if not checked.

Example : Sample Element Outputs

Using the same name value for multiple boxes.

<!-- INPUT --> <div><crowd-checkbox name="myformbit" value="Red"> Red </div> <div><crowd-checkbox name="myformbit" value="Yellow"> Yellow </div> <div><crowd-checkbox name="myformbit" value="Green"> Green </div>
//Output with "Red" checked [ { "myformbit": { "Green": false, "Red": true, "Yellow": false } } ]

Note that all three color values are properties of a single object.

Using different name values for each box.

<!-- INPUT --> <div><crowd-checkbox name="Stop" value="Red"> Red </div> <div><crowd-checkbox name="Slow" value="Yellow"> Yellow </div> <div><crowd-checkbox name="Go" value="Green"> Green </div>
//Output with "Red" checked [ { "Go": { "Green": false }, "Slow": { "Yellow": false }, "Stop": { "Red": true } } ]

See Also

For more information, see the following.