The Barcode component generates 1D barcodes (e.g. Code128) and 2D QR codes directly in the browser. QR codes accept any text and update live as you type. Code 128 only encodes ASCII characters, so its textbox uses a constraint to reject non-English input — invalid text is blocked before it reaches the encoder, avoiding errors.

<zk>
	<vlayout spacing="10px" style="padding: 10px 0;">
		<label value="QR code text:"/>
		<textbox value="https://www.zkoss.org" width="320px"
		         onChanging="qr.setValue(event.getValue())"/>
		<barcode id="qr" type="qr" value="https://www.zkoss.org" height="150px"/>

		<label value="Code 128 text (English and numbers only):"/>
		<textbox value="https://www.zkoss.org" width="320px"
		         constraint="/^[ -~]*$/: Code 128 supports English (ASCII) characters only"
		         onChange="code128.setValue(event.getValue())" instant="true"/>
		<barcode id="code128" type="code128" value="https://www.zkoss.org" displayValue="true" height="80px"/>
	</vlayout>
</zk>