Attributes Element Hierarchy Output See Also

crowd-radio-button

A button that can be either checked or unchecked. When radio buttons are inside a radio group, exactly one radio button in the group can be checked at any time. The following is an example of how to configure a crowd-radio-button element inside of a crowd-radio-group element.

See an interactive example of an HTML template that uses this Crowd HTML Element in CodePen.

The following is an example of the syntax that you can use with the <crowd-radio-button> element. Copy the following code and save it in a file with the extension .html. Open the file in any browser to preview and interact with this template.

The previous example can be seen in a custom worker task template in this GitHub example: entity recognition labeling job custom template.

Crowd HTML Element radio buttons do not support the HTML tag, required. To make a radio button selection required, use <input type="radio"> elements to create radio buttons and add the required tag. The name attribute for all <input> elements that belong to the same group of radio buttons must be the same. For example, the following template requires the user to select a radio button in the animal-type group before submitting.

Attributes

The following attributes are supported by this element.

checked

A Boolean switch that, if present, displays the radio button as checked.

disabled

A Boolean switch that, if present, displays the button 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.

Note

If you use the buttons outside of a crowd-radio-group element, but with the same name string and different value strings, the name object in the output will contain a Boolean value for each value string. To ensure that only one button in a group is selected, make them children of a crowd-radio-group element and use different name values.

value

A property name for the element's boolean value. If not specified, it uses "on" as the default, e.g. { "<name>": { "<value>": <true or false> } }.

Element Hierarchy

This element has the following parent and child elements.

Parent elements: crowd-radio-group
Child elements: none

Output

Outputs an object with the following pattern: { "<name>": { "<value>": <true or false> } }. If you use the buttons outside of a crowd-radio-group element, but with the same name string and different value strings, the name object will contain a Boolean value for each value string. To ensure that only one in a group of buttons is selected, make them children of a crowd-radio-group element and use different name values.

Example Sample output of this element


[
  {
    "btn1": {
      "yes": true
    },
    "btn2": {
      "no": false
    }
  }
]