Text inputs

The text criteria collect free text: a line (text), a secret (password), several lines (textarea), formatted text (markdown-editor), a value to read (text-view) or a color (color). Below are the real criteria of the AWE React client: pick a type, change its attributes and the XML below follows. Type in them, too: they are real fields.

Live preview

LightDark

Controls

Component

Label

Placeholder

Icon

∅No iconusermailsearchcalendar

Size

DefaultSmallLarge

Unit

Required

Read only

XML

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

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	textpasswordtextareamarkdown-editortext-viewcolor
label	Label	text
placeholder	Placeholder	text
icon	Icon	lucide:userlucide:maillucide:searchlucide:calendar
size	Size	smlg
area-rows	Rows	text
unit	Unit	text
value	Text to show	text
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 markdown-editor has no label of its own: it takes the width of its row and shows its placeholder while empty. The text-view shows its value as text and is not an input: it sends nothing to the server.

Recipes

Common fields, rendered by the same components.

Password with a show button

Every password has a button at the end that shows or hides what was typed; the value and its validation do not change.

<criteria id="secret" component="password" label="Password" placeholder="At least 12 characters"
          icon="lucide:lock" validation="required" />

Markdown editor

The markdown-editor offers a toolbar for headings, emphasis, lists and links. Its value is the HTML the editor writes.

<criteria id="notes" component="markdown-editor" placeholder="Write the release notes" />

Color with a picker

A color criterion is a hexadecimal text with a button that opens a color picker. The value is the color the criterion starts with.

<criteria id="brand" component="color" label="Brand color" value="#4f46e5" />

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

• 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.