Light Dark System

QR Code

<sl-qr-code> | SlQrCode
Since 2.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>

import { useState } from 'react';
import { SlQrCode, SlInput } from '@shoelace-style/shoelace/dist/react';

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

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

const App = () => {
  const [value, setValue] = useState('https://shoelace.style/');

  return (
    <>
      <div className="qr-overview">
        <SlQrCode value={value} label="Scan this code to visit Shoelace on the web!" />
        <br />

        <SlInput maxlength="255" clearable onInput={event => setValue(event.target.value)} />
      </div>

      <style>{css}</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>

import { SlQrCode } from '@shoelace-style/shoelace/dist/react';

const App = () => <SlQrCode 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>

import { SlQrCode } from '@shoelace-style/shoelace/dist/react';

const App = () => <SlQrCode 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>

import { SlQrCode } from '@shoelace-style/shoelace/dist/react';

const App = () => <SlQrCode 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>

import { SlQrCode } from '@shoelace-style/shoelace/dist/react';

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

const App = () => {
  return (
    <>
      <div className="qr-error-correction">
        <SlQrCode value="https://shoelace.style/" error-correction="L" />
        <SlQrCode value="https://shoelace.style/" error-correction="M" />
        <SlQrCode value="https://shoelace.style/" error-correction="Q" />
        <SlQrCode value="https://shoelace.style/" error-correction="H" />
      </div>

      <style>{css}</style>
    </>
  );
};

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/components/qr-code/qr-code.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/components/qr-code/qr-code.js';

To import this component using a bundler:

import '@shoelace-style/shoelace/dist/components/qr-code/qr-code.js';

To import this component as a React component:

import { SlQrCode } from '@shoelace-style/shoelace/dist/react';

Properties

Name Description Reflects 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.