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.
<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
- Events and actions
- Full reference
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 |
| 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. |
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
criteriaelement.