Selects and suggests

The select criteria let the user pick among a list of options: one (select, suggest) or several (select-multiple, suggest-multiple, picklist). Below are the real criteria of the AWE React client: pick a type, change its attributes and the XML below follows. The checkbox and radio criteria have their own page.

Live preview

LightDark

Controls

Component

Label

Placeholder

Icon

∅No iconusermailsearchcalendar

Size

DefaultSmallLarge

Clear button

Required

Read only

XML

<criteria id="demo"
          component="select"
          label="Field"
          initial-load="enum"
          target-action="CountryList" />

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	selectselect-multiplesuggestsuggest-multiplepicklist
label	Label	text
placeholder	Placeholder	text
icon	Icon	lucide:userlucide:maillucide:searchlucide:calendar
size	Size	smlg
optional	Clear button	true / false
display	Selected values	chip
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, placeholder, icon, size, validation) are in the criteria overview. The options come from an enumerated list or a query of the server (initial-load says which kind and target-action which one). In these examples the server is simulated: a select or a picklist shows a static list, and a suggest or suggest-multiple searches that list while you type, through the same request the client sends to the server. Type "an" in the suggest to see it filter.

Recipes

Common fields, rendered by the same components.

Select from an enum

The options of a select come from an enumerated list or a query of the server: initial-load says which kind and target-action which one.

<criteria id="country" component="select" label="Country" placeholder="Choose a country"
          initial-load="enum" target-action="CountryList" />

Search while typing

A suggest-multiple asks the server for the options that match what the user types and keeps every one chosen. Type "a" or "ch" to filter the list.

<criteria id="visited" component="suggest-multiple" label="Visited countries" placeholder="Type to search"
          initial-load="query" target-action="CountryList" />

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

• Checkbox and radio: the yes/no and single-choice criteria, and the switch.
• 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.