Checkbox and radio

The checkbox and radio criteria answer a yes/no or pick one of a few visible options: radio and button-radio choose one, checkbox is a yes/no (drawn as a switch with the switch style) and button-checkbox chooses several. Below are the real criteria of the AWE React client: pick a type, change its attributes and the XML below follows. The selects and suggests criteria have their own page.

Live preview

LightDark

Controls

Component

Label

Size

DefaultSmallLarge

XML

<criteria id="demo"
          component="radio"
          label="Field"
          group="plan"
          value="basic"
          checked="true"
          style="no-label" />
<criteria id="demo2"
          component="radio"
          label="Business"
          group="plan"
          value="business"
          style="no-label" />
<criteria id="demo3"
          component="radio"
          label="Enterprise"
          group="plan"
          value="enterprise"
          style="no-label" />

Attributes

The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference

Attribute	Control	Values
component	Component	radiobutton-radiocheckboxbutton-checkbox
label	Label	text
size	Size	smlg
style	Show as a switch	true / false
validation	Required	true / false
readonly	Read only	true / false

Events and actions

Action (type)	What it does
reset	Empties the value of the criterion.
restore	Puts back the initial value of the criterion.
validate	Runs the validation of the criterion (required, formats) and shows its error.
set-invalid	Marks the criterion as invalid with the message of the action.
set-valid	Clears the validation error of the criterion.
copy-criterion-value-clipboard	Copies the value of the criterion to the clipboard.

Full reference

• Full documentation of this component
• XSD reference of the element

The attributes shared by every criterion (label, size, validation) are in the criteria overview. Radios that share a group are one choice: choosing one clears the others. The options of a button-radio and a button-checkbox come from an enumerated list (initial-load and target-action say which one); here the server is simulated with a static list.

Recipes

Common fields, rendered by the same components.

Radio group

Radios with the same group are one choice. Each one carries its own value, and checked marks the one chosen at the start.

<criteria id="plan1" component="radio" label="Basic" group="plan" value="basic" checked="true" style="no-label" />
<criteria id="plan2" component="radio" label="Business" group="plan" value="business" style="no-label" />
<criteria id="plan3" component="radio" label="Enterprise" group="plan" value="enterprise" style="no-label" />

Required checkbox

A checkbox with validation="required" must be checked before the form is sent. Use it for an acceptance, such as the terms of a service.

<criteria id="terms" component="checkbox" label="I accept the terms" validation="required" />

Switch

A checkbox with the switch style is drawn as a switch. Its label is the text beside it.

<criteria id="notify" component="checkbox" label="Email me when it ships" style="switch" />

Events and actions

A criterion has no event of its own to listen to: every change of its value checks the dependencies whose dependency-element names it, and pressing Enter in a text field runs the submit button of its window. The actions that work on criteria:

Action	Description
reset	Empties the value of the criterion
restore	Puts back the initial value of the criterion
validate	Runs the validation of the criterion and shows its error
set-invalid	Marks the criterion as invalid with the message of the action
set-valid	Clears the validation error of the criterion
copy-criterion-value-clipboard	Copies the value of the criterion to the clipboard

More

• Selects and suggests: the criteria that pick among a list of options.
• Criteria overview: the attributes every criterion shares and the other families of inputs.
• Full documentation of the criteria: every type, attribute, validation and example.
• XSD reference of the criteria element.