Criteria

A criterion is an input of a screen: it gets a value from the user and sends it to the server. Its component attribute selects the kind of input, and the rest of the attributes (label, placeholder, size, validation...) apply to all of them. Below is the real criterion of the AWE React client with the attributes they share: change them and the XML below follows. Type in it, too: it is a real field.

Live preview

LightDark

Controls

Component

Label

Placeholder

Icon

∅No iconusermailsearchcalendar

Size

DefaultSmallLarge

Required

Read only

XML

<criteria id="demo" component="text" label="Customer" />

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	textselectcheckbox
label	Label	text
placeholder	Placeholder	text
icon	Icon	lucide:userlucide:maillucide:searchlucide:calendar
size	Size	smlg
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

Types of criteria

Each family has its own page, with a playground that switches between its types:

• Text inputs: text, password, textarea, markdown-editor, text-view and color.
• Numbers and dates: numeric, date, date-range, time and filtered-calendar.
• Selects and suggests: select, select-multiple, suggest, suggest-multiple and picklist.
• Checkbox and radio: radio, button-radio, checkbox (also as a switch) and button-checkbox.
• File upload: uploader.

hidden is not visible, so it has no playground: it carries a value to the server without showing it. The criteria reference describes every type.

Recipes

A common field, rendered by the same component. The other recipes are on the page of each family.

Required field with icon

validation="required" makes the field mandatory and the label shows it. The placeholder tells what to type and the icon goes in front of the input.

<criteria id="email" component="text" label="Email" placeholder="name@company.com" icon="lucide:mail" validation="required" />

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

• Full documentation of the criteria: every type, attribute, validation and example.
• XSD reference of the criteria element.