Skip to main content
Since Shoelace 2.0 Code stable

QR Code

sl-qr-code

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

Examples

Basic QR Code

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>
div.qr-overview
  sl-qr-code value="https://shoelace.style/" label="Scan this code to visit Shoelace on the web!"
  br
  sl-input maxlength="255" clearable=true label="Value"

javascript:
  const container = document.querySelector(.qr-overview);
  const qrCode = container.querySelector(sl-qr-code);
  const input = container.querySelector(sl-input);

  input.value = qrCode.value;
  input.addEventListener(sl-input, () => (qrCode.value = input.value));

css:
  .qr-overview {
    max-width: 256px;
  }

  .qr-overview sl-input {
    margin-top: 1rem;
  }

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>
sl-qr-code value="https://shoelace.style/" fill="deeppink" background="white"

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>
sl-qr-code value="https://shoelace.style/" size="64"

Radius

Create a rounded effect with the radius attribute.

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

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>
div.qr-error-correction
  sl-qr-code value="https://shoelace.style/" error-correction="L"
  sl-qr-code value="https://shoelace.style/" error-correction="M"
  sl-qr-code value="https://shoelace.style/" error-correction="Q"
  sl-qr-code value="https://shoelace.style/" error-correction="H"

css:
  .qr-error-correction {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

Component Props

Property Default Details
value ''

string

The QR code’s value.

label ''

string

The label for assistive devices to announce. If unspecified, the value will be used instead.

size 128

number

The size of the QR code, in pixels.

fill 'black'

string

The fill color. This can be any valid CSS color, but not a CSS custom property.

background 'white'

string

The background color. This can be any valid CSS color or transparent. It cannot be a CSS custom property.

radius 0

number

The edge radius of each module. Must be between 0 and 0.5.

errorCorrection
error-correction
'H'

'L' | 'M' | 'Q' | 'H'

The level of error correction to use. Learn more

updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

CSS Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.