`<bmx-barcode>`

A barcode drawn from a value: Code 128, Code 39, EAN-13, EAN-8, UPC-A, ITF (the outer-carton code), Data Matrix, QR and PDF417 (the stacked code on driving licences, boarding passes and shipping labels). Vector, so it prints as sharply as the printer can; drawn entirely in the page, so nothing about the value ever leaves it.

13 properties · 1 events · 3 methods · 3 parts

Example

EAN and UPC values can be given without their check digit: it is worked out and printed. A wrong check digit is refused rather than drawn.

Cartons, labels and small parts

PDF417: licences, boarding passes and shipping labels

PDF417 packs text two characters to a codeword and long numbers about three digits to one; columns, error-level (0-8), row-height and compact shape it.

Live, with saving

Kind Value

Try letters with EAN-13 to see the error.

Show markup

<div class="row" style="gap: 24px; flex-wrap: wrap; align-items: flex-end">
  <bmx-barcode type="ean13" value="501234567890"></bmx-barcode>
  <bmx-barcode type="upca" value="03600029145"></bmx-barcode>
  <bmx-barcode type="ean8" value="9638507"></bmx-barcode>
  <bmx-barcode type="code128" value="BMX-1.8.0-MINTAKA"></bmx-barcode>
</div>
<p class="note">EAN and UPC values can be given without their check digit: it is worked out and printed. A wrong check digit is refused rather than drawn.</p>

<h3>Cartons, labels and small parts</h3>

<div class="row" style="gap: 24px; flex-wrap: wrap; align-items: flex-end">
  <bmx-barcode type="itf" value="1540014128876" check-digit bar-height="56"></bmx-barcode>
  <bmx-barcode type="code39" value="PART-0042" module-width="1.5"></bmx-barcode>
  <bmx-barcode type="datamatrix" value="(01)05012345678900(17)271231(10)LOT42" module-width="5"></bmx-barcode>
  <bmx-barcode type="datamatrix" value="SN 2026-10-06-0001" style="--bmx-barcode-color: #0b3d91; --bmx-barcode-padding: 6px; --bmx-barcode-radius: 6px"></bmx-barcode>
</div>

<h3>PDF417: licences, boarding passes and shipping labels</h3>

<div class="row" style="gap: 24px; flex-wrap: wrap; align-items: flex-end">
  <bmx-barcode type="pdf417" value="@&#10;ANSI 636014080102DL00410288ZC03290034DLDAQD1234562&#10;DCSDOE&#10;DACJOHN&#10;DBB19800131"></bmx-barcode>
  <bmx-barcode type="pdf417" columns="3" error-level="4" value="M1DOE/JOHN EABC123 LHRJFKBA 0175 280Y012A0042 100"></bmx-barcode>
  <bmx-barcode type="pdf417" compact value="Compact form, for narrow spaces"></bmx-barcode>
</div>
<p class="note">PDF417 packs text two characters to a codeword and long numbers about three digits to one; <code>columns</code>, <code>error-level</code> (0-8), <code>row-height</code> and <code>compact</code> shape it.</p>

<h3>Live, with saving</h3>

<div class="row" style="gap: 12px; flex-wrap: wrap; align-items: center">
  <label for="ex-bc-type">Kind</label>
  <select id="ex-bc-type">
    <option value="code128">Code 128</option>
    <option value="code39">Code 39</option>
    <option value="ean13">EAN-13</option>
    <option value="ean8">EAN-8</option>
    <option value="upca">UPC-A</option>
    <option value="itf">ITF</option>
    <option value="datamatrix">Data Matrix</option>
    <option value="qr">QR</option>
    <option value="pdf417">PDF417</option>
  </select>
  <label for="ex-bc-value">Value</label>
  <input id="ex-bc-value" value="ORDER-20261006-17" />
  <button type="button" id="ex-bc-png">Save PNG</button>
  <button type="button" id="ex-bc-svg">Save SVG</button>
</div>
<p style="margin-top: 12px"><bmx-barcode id="ex-bc" value="ORDER-20261006-17"></bmx-barcode></p>
<p class="note" id="ex-bc-out" role="status">Try letters with EAN-13 to see the error.</p>

<script type="module">
  await customElements.whenDefined('bmx-barcode');
  const bc = document.getElementById('ex-bc');
  const out = document.getElementById('ex-bc-out');
  const kind = document.getElementById('ex-bc-type');
  const value = document.getElementById('ex-bc-value');
  const update = () => {
    out.textContent = '';
    bc.type = kind.value;
    bc.value = value.value;
  };
  kind.addEventListener('change', update);
  value.addEventListener('input', update);
  bc.addEventListener('bmxBarcodeError', e => (out.textContent = `Not drawn: ${e.detail.message}`));
  document.getElementById('ex-bc-png').addEventListener('click', () => bc.download('png'));
  document.getElementById('ex-bc-svg').addEventListener('click', () => bc.download('svg'));
</script>

WHY THE COLOURS DO NOT FOLLOW THE THEME

A scanner reads dark bars on a light ground. A barcode drawn light-on-dark because the page is in dark mode looks right and scans for nobody, so the default is black on white in every theme. --bmx-barcode-color and --bmx-barcode-background change it on purpose; keep the contrast high.

WHY THE CHECK DIGIT IS WORKED OUT FOR YOU

EAN and UPC values may be given with or without their final check digit. Without, it is added; with, it is checked, and a wrong one is an error rather than a barcode that scans as a different product. ITF adds one only when check-digit is set, since cartons often carry their own.

ACCESSIBILITY

The symbol is an image named by what it holds: "EAN-13 barcode: 5012345678900" unless label says otherwise. A value that cannot be encoded shows why, in words, and fires bmxBarcodeError.

Properties

Property	Attribute	Type	Default	Description
`barHeight`	`bar-height`	`number`	`64`	How tall the bars of a linear barcode are, in CSS pixels.
`checkDigit`	`check-digit`	`boolean`	`false`	ITF only: add a check digit.
`columns`	`columns`	`number`	—	PDF417 only: how many data columns, 1 to 30. Default: chosen so the code is about three times as wide as tall.
`compact`	`compact`	`boolean`	`false`	PDF417 only: the compact (truncated) form, narrower, for where space is short.
`errorCorrection`	`error-correction`	`BmxQrErrorCorrection`	`'M'`	QR only: how much damage the code survives - `L`, `M`, `Q` or `H`.
`errorLevel`	`error-level`	`number`	—	PDF417 only: the error correction level, 0 to 8. Default: the level the standard recommends for the amount of data.
`fileName`	`file-name`	`string`	`'barcode'`	The file name `download` offers.
`label`	`label`	`string`	—	The accessible name. Default: the kind of code and its value.
`moduleWidth`	`module-width`	`number`	—	How wide one module (the narrowest bar, or one square) is, in CSS pixels. Default 2 for bars and PDF417, 4 for squares.
`rowHeight`	`row-height`	`number`	`3`	PDF417 only: the height of a row, in modules (2 to 10).
`showText`	`show-text`	`boolean`	`true`	Print the value under a linear barcode.
`type`	`type`	`BmxBarcodeSymbology`	`'code128'`	Which kind of barcode: `code128`, `code39`, `ean13`, `ean8`, `upca`, `itf`, `datamatrix`, `qr` or `pdf417`.
`value`	`value`	`string`	`''`	What the barcode holds.

Events

Event	Detail	Description
`bmxBarcodeError`	`BmxBarcodeErrorDetail`	Fired when the value cannot be drawn as the chosen kind of barcode.

Methods

Method	Signature	Description
`download`	`download(format?: BmxBarcodeFileFormat, name?: string) => Promise<void>`	Offers the barcode to the reader as a file.
`toPng`	`toPng(scale?: number) => Promise<Blob \| null>`	The barcode as a PNG at `scale` times its size on screen. Null when there is nothing drawn.
`toSvg`	`toSvg() => Promise<string \| null>`	The barcode as a standalone SVG document, in the colours it is shown in. Null when there is nothing drawn.

CSS shadow parts

Part	Description
`error`	Why the value could not be drawn.
`frame`	The box around the symbol, with the quiet zone inside it.
`svg`	The drawn symbol.

CSS custom properties

Property	Description
`--bmx-barcode-background`	The ground and quiet zone. Default white in every theme.
`--bmx-barcode-color`	The bars. Default black in every theme, because scanners read dark on light.
`--bmx-barcode-font`	The font of the printed value.
`--bmx-barcode-padding`	Space between the frame's edge and the quiet zone.
`--bmx-barcode-radius`	The frame's corner radius.