QR Code

Renders a QR code as SVG for any value.

<div
  data-controller="zag-qr-code"
  data-part="root"
  data-zag-qr-code-value-value="https://github.com/mateomurphy/stimulus-zag"
  class="border-border bg-popover h-32 w-32 rounded-lg border p-2"
>
  <svg data-part="frame" class="h-full w-full">
    <path data-part="pattern" fill="currentColor"></path>
  </svg>
</div>

Parts

root, frame, pattern, overlay, download-trigger.

Values

Attribute	Type	Default	Description
data-zag-qr-code-value-value	String	""	The value to encode.
data-zag-qr-code-pixel-size-value	Number	10	Size of each QR module.

Events

Emits zag-qr-code:change — detail is { value }.

Programmatic control

value (getter), setValue(value).