QR Code

<sl-qr-code> | SlQrCode

Since 1.0

stable

Generates a QR code and renders it using the Canvas API.

QR codes are useful for providing small pieces of information to users who can quickly scan them with a smartphone. Most smartphones have built-in QR code scanners, so simply pointing the camera at a QR code will decode it and allow the user to visit a website, dial a phone number, read a message, etc.

<div class="qr-overview">
  <sl-qr-code value="https://shoelace.style/" label="Scan this code to visit Shoelace on the web!"></sl-qr-code>
  <br />

  <sl-input maxlength="255" clearable label="Value"></sl-input>
</div>

<script>
  const container = document.querySelector('.qr-overview');
  const qrCode = container.querySelector('sl-qr-code');
  const input = container.querySelector('sl-input');

  customElements.whenDefined('sl-qr-code').then(() => {
    input.value = qrCode.value;
    input.addEventListener('sl-input', () => (qrCode.value = input.value));
  });
</script>

<style>
  .qr-overview {
    max-width: 256px;
  }

  .qr-overview sl-input {
    margin-top: 1rem;
  }
</style>

Examples

Colors

Use the fill and background attributes to modify the QR code’s colors. You should always ensure good contrast for optimal compatibility with QR code scanners.

<sl-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></sl-qr-code>

Size

Use the size attribute to change the size of the QR code.

<sl-qr-code value="https://shoelace.style/" size="64"></sl-qr-code>

Radius

Create a rounded effect with the radius attribute.

<sl-qr-code value="https://shoelace.style/" radius="0.5"></sl-qr-code>

Error Correction

QR codes can be rendered with various levels of error correction that can be set using the error-correction attribute. This example generates four codes with the same value using different error correction levels.

<div class="qr-error-correction">
  <sl-qr-code value="https://shoelace.style/" error-correction="L"></sl-qr-code>
  <sl-qr-code value="https://shoelace.style/" error-correction="M"></sl-qr-code>
  <sl-qr-code value="https://shoelace.style/" error-correction="Q"></sl-qr-code>
  <sl-qr-code value="https://shoelace.style/" error-correction="H"></sl-qr-code>
</div>

<style>
  .qr-error-correction {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
</style>

Properties

Name	Description	Type	Default
`value`	The QR code’s value.	`string`	`''`
`label`	The label for assistive devices to announce. If unspecified, the value will be used instead.	`string`	`''`
`size`	The size of the QR code, in pixels.	`number`	`128`
`fill`	The fill color. This can be any valid CSS color, but not a CSS custom property.	`string`	`'black'`
`background`	The background color. This can be any valid CSS color or `transparent`. It cannot be a CSS custom property.	`string`	`'white'`
`radius`	The edge radius of each module. Must be between 0 and 0.5.	`number`	`0`
`errorCorrection` `error-correction`	The level of error correction to use. Learn more	`'L' \| 'M' \| 'Q' \| 'H'`	`'H'`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name	Description
`base`	The component’s base wrapper.

Learn more about customizing CSS parts.