Barcode — Smart UI JavaScript API

Barcode — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Barcode - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-barcode id="demo-barcode"></smart-barcode>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.barcode.js';

    const el = document.getElementById('demo-barcode');
    if (el) {

      el.value = '9780143127741';
      el.labelPosition = 'bottom';
      el.showLabel = true;

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: Barcode   Framework: JavaScript   Selector: smart-barcode

API counts: 16 properties, 4 methods, 1 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: export(), getDataURL(), getDataURLAsync(), isValid()

Common events: invalid

Module hint: smart-webcomponents/source/modules/smart.barcode.js

Barcodes encodes text value in a specific pattern.

Class

Barcode

Barcode

Barcodes encodes text value in a specific pattern.

Selector

smart-barcode

Quick picks

value

Properties

BbackgroundColorDefines the background color that appears behind the barcode element. This setting determines the color fill for the area surrounding and underneath the barcode, helping to improve contrast and overall barcode visibility. Accepts color values in standard CSS formats (e.g., hex, RGB, or color names).
DdisplayLabelDetermines whether the barcode label is displayed on the interface. When set to true, the barcode label will be visible; when set to false, the label will be hidden.
HheightDefines or retrieves the height of the barcode, in pixels. When a value of 0 is assigned, the barcode's height will be determined automatically based on its content and format, ensuring optimal sizing without manual specification. If a positive value is provided, the barcode will be rendered at that exact height.
LlabelColorSpecifies the color used for the text label displayed below or alongside the barcode. This color determines how the label appears to users and can be set using standard color values, such as hex codes (e.g., #000000 for black) or color names (e.g., "red").
LlabelFontSpecifies the font family to be used for displaying the text on the barcode label. This determines the appearance of the label's text by applying the selected font style.
LlabelFontSizeSpecifies the font size used for the text displayed on the barcode label, allowing you to control the readability and appearance of the label’s text. Accepts standard CSS font size units such as px, em, rem, or pt.
LlabelMarginBottomSpecifies the amount of space, in pixels or other units, to be applied as the margin below the barcode label. This determines the distance between the bottom edge of the barcode label and any content or elements directly beneath it.
LlabelMarginTopSpecifies the amount of space added to the top of the barcode label by setting the top margin. This determines how far the label is positioned from the top edge of its container or surrounding elements. Accepts values in units such as pixels (px), em, or percentages (%).
LlabelPositionSpecifies the exact placement of the barcode label relative to the barcode image, allowing you to control where the label appears (e.g., above, below, left, or right of the barcode). This property ensures the label is positioned according to your layout requirements.
LlineColorSpecifies the color to be used for the barcode lines or bars, allowing you to customize the appearance of the barcode by changing its foreground color. This setting does not affect the background color of the barcode. Use a valid color value (e.g., HEX, RGB, or color name) as supported by your implementation.
LlineHeightSpecifies the height, in pixels, of each individual barcode line. Increasing this value will make the barcode lines taller, while decreasing it will reduce their height. This property is useful for adjusting the overall visibility and scannability of the barcode.
LlineWidthSpecifies the thickness of each individual bar in the barcode, allowing you to control how wide the printed barcode lines appear. Adjusting this value can help improve barcode readability for different scanners and printing methods.
RrenderAsSpecifies the rendering mode used to display the barcode, determining whether it is generated as a vector graphic (such as SVG), a raster image (such as PNG), or using another supported format. This setting affects the appearance, scalability, and performance of the rendered barcode.
TtypeSpecifies the format or symbology of the barcode to be generated (e.g., Code128, QR Code, EAN-13, UPC-A). This determines how the data will be encoded and displayed within the barcode.
VvalueRetrieves the current value of the barcode or updates it with a new value. This property allows you to access the existing barcode data or assign a new barcode value programmatically.
WwidthSpecifies or retrieves the width of the barcode in pixels. If the width is set to 0, the barcode’s width will be automatically calculated based on its content and type. Use this property to define a fixed width for the barcode, or set it to 0 to allow automatic sizing for optimal readability.

Events

IinvalidThis event is triggered whenever the scanned or entered barcode value does not meet the required validation criteria. It typically occurs when the barcode is missing, formatted incorrectly, or contains unsupported characters, allowing you to handle validation errors and provide appropriate feedback to the user.

Methods

EexportExports the generated barcode image or data for use outside the application. This function typically saves or downloads the barcode in formats such as PNG, JPEG, or SVG, making it accessible for printing, sharing, or integration with other systems.
GgetDataURLRetrieves the barcode image encoded as a Base64 string, allowing for convenient embedding or transmission of the barcode in web applications or APIs without needing a physical image file.
GgetDataURLAsyncRetrieves the barcode image encoded as a Base64 string, allowing you to easily embed or transmit the barcode in formats such as HTML, CSS, or JSON.
IisValidRetrieves the validation status of the barcode, indicating whether the scanned barcode meets the required format and integrity checks.

Properties

backgroundColorDefines the background color that appears behind the barcode element. This setting determines the color fill for the area surrounding and underneath the barcode, helping to improve contrast and overall barcode visibility. Accepts color values in standard CSS formats (e.g., hex, RGB, or color names).string

Defines the background color that appears behind the barcode element. This setting determines the color fill for the area surrounding and underneath the barcode, helping to improve contrast and overall barcode visibility. Accepts color values in standard CSS formats (e.g., hex, RGB, or color names).

Default value

"white"
Try a demo showcasing the backgroundColor property.

Examples

Markup and runtime examples for backgroundColor:

HTML:

<smart-barcode background-color="white"></smart-barcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-barcode');
el.backgroundColor = "yellow";

Read the current value:

const el = document.querySelector('smart-barcode');
const backgroundColor = el.backgroundColor;

displayLabelDetermines whether the barcode label is displayed on the interface. When set to true, the barcode label will be visible; when set to false, the label will be hidden.boolean

Determines whether the barcode label is displayed on the interface. When set to true, the barcode label will be visible; when set to false, the label will be hidden.

Default value

true

Examples

Markup and runtime examples for displayLabel:

HTML attribute:

<smart-barcode display-label></smart-barcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-barcode');
el.displayLabel = true;

Read the current value:

const el = document.querySelector('smart-barcode');
const displayLabel = el.displayLabel;

heightDefines or retrieves the height of the barcode, in pixels. When a value of 0 is assigned, the barcode's height will be determined automatically based on its content and format, ensuring optimal sizing without manual specification. If a positive value is provided, the barcode will be rendered at that exact height.number

Defines or retrieves the height of the barcode, in pixels. When a value of 0 is assigned, the barcode's height will be determined automatically based on its content and format, ensuring optimal sizing without manual specification. If a positive value is provided, the barcode will be rendered at that exact height.

Default value

0
Try a demo showcasing the height property.

Examples

Markup and runtime examples for height:

HTML:

<smart-barcode height="10"></smart-barcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-barcode');
el.height = 10;

Read the current value:

const el = document.querySelector('smart-barcode');
const height = el.height;

labelColorSpecifies the color used for the text label displayed below or alongside the barcode. This color determines how the label appears to users and can be set using standard color values, such as hex codes (e.g., #000000 for black) or color names (e.g., "red").string

Specifies the color used for the text label displayed below or alongside the barcode. This color determines how the label appears to users and can be set using standard color values, such as hex codes (e.g., #000000 for black) or color names (e.g., "red").

Default value

"black"
Try a demo showcasing the labelColor property.

Examples

Markup and runtime examples for labelColor:

HTML:

<smart-barcode label-color="white"></smart-barcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-barcode');
el.labelColor = "red";

Read the current value:

const el = document.querySelector('smart-barcode');
const labelColor = el.labelColor;

labelFontSpecifies the font family to be used for displaying the text on the barcode label. This determines the appearance of the label's text by applying the selected font style.string

Specifies the font family to be used for displaying the text on the barcode label. This determines the appearance of the label's text by applying the selected font style.

Default value

"monospace"

Examples

Markup and runtime examples for labelFont:

HTML:

<smart-barcode label-font="monospace"></smart-barcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-barcode');
el.labelFont = "sans-serif";

Read the current value:

const el = document.querySelector('smart-barcode');
const labelFont = el.labelFont;

labelFontSizeSpecifies the font size used for the text displayed on the barcode label, allowing you to control the readability and appearance of the label’s text. Accepts standard CSS font size units such as px, em, rem, or pt.number

Specifies the font size used for the text displayed on the barcode label, allowing you to control the readability and appearance of the label’s text. Accepts standard CSS font size units such as px, em, rem, or pt.

Default value

14
Try a demo showcasing the labelFontSize property.

Examples

Markup and runtime examples for labelFontSize:

HTML:

<smart-barcode label-font-size="14"></smart-barcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-barcode');
el.labelFontSize = 10;

Read the current value:

const el = document.querySelector('smart-barcode');
const labelFontSize = el.labelFontSize;

labelMarginBottomSpecifies the amount of space, in pixels or other units, to be applied as the margin below the barcode label. This determines the distance between the bottom edge of the barcode label and any content or elements directly beneath it.number

Specifies the amount of space, in pixels or other units, to be applied as the margin below the barcode label. This determines the distance between the bottom edge of the barcode label and any content or elements directly beneath it.

Default value

5

Examples

Markup and runtime examples for labelMarginBottom:

HTML:

<smart-barcode label-margin-bottom="5"></smart-barcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-barcode');
el.labelMarginBottom = 0;

Read the current value:

const el = document.querySelector('smart-barcode');
const labelMarginBottom = el.labelMarginBottom;

labelMarginTopSpecifies the amount of space added to the top of the barcode label by setting the top margin. This determines how far the label is positioned from the top edge of its container or surrounding elements. Accepts values in units such as pixels (px), em, or percentages (%).number

Specifies the amount of space added to the top of the barcode label by setting the top margin. This determines how far the label is positioned from the top edge of its container or surrounding elements. Accepts values in units such as pixels (px), em, or percentages (%).

Default value

5

Examples

Markup and runtime examples for labelMarginTop:

HTML:

<smart-barcode label-margin-top="5"></smart-barcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-barcode');
el.labelMarginTop = 5;

Read the current value:

const el = document.querySelector('smart-barcode');
const labelMarginTop = el.labelMarginTop;

labelPositionSpecifies the exact placement of the barcode label relative to the barcode image, allowing you to control where the label appears (e.g., above, below, left, or right of the barcode). This property ensures the label is positioned according to your layout requirements."top" | "bottom"

Specifies the exact placement of the barcode label relative to the barcode image, allowing you to control where the label appears (e.g., above, below, left, or right of the barcode). This property ensures the label is positioned according to your layout requirements.

Default value

"bottom"

Examples

Markup and runtime examples for labelPosition:

HTML:

<smart-barcode label-position="bottom"></smart-barcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-barcode');
el.labelPosition = "top";

Read the current value:

const el = document.querySelector('smart-barcode');
const labelPosition = el.labelPosition;

lineColorSpecifies the color to be used for the barcode lines or bars, allowing you to customize the appearance of the barcode by changing its foreground color. This setting does not affect the background color of the barcode. Use a valid color value (e.g., HEX, RGB, or color name) as supported by your implementation.string

Specifies the color to be used for the barcode lines or bars, allowing you to customize the appearance of the barcode by changing its foreground color. This setting does not affect the background color of the barcode. Use a valid color value (e.g., HEX, RGB, or color name) as supported by your implementation.

Default value

"black"
Try a demo showcasing the lineColor property.

Examples

Markup and runtime examples for lineColor:

HTML:

<smart-barcode line-color="balck"></smart-barcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-barcode');
el.lineColor = "green";

Read the current value:

const el = document.querySelector('smart-barcode');
const lineColor = el.lineColor;

lineHeightSpecifies the height, in pixels, of each individual barcode line. Increasing this value will make the barcode lines taller, while decreasing it will reduce their height. This property is useful for adjusting the overall visibility and scannability of the barcode.number

Specifies the height, in pixels, of each individual barcode line. Increasing this value will make the barcode lines taller, while decreasing it will reduce their height. This property is useful for adjusting the overall visibility and scannability of the barcode.

Default value

50
Try a demo showcasing the lineHeight property.

Examples

Markup and runtime examples for lineHeight:

HTML:

<smart-barcode line-height="50"></smart-barcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-barcode');
el.lineHeight = 60;

Read the current value:

const el = document.querySelector('smart-barcode');
const lineHeight = el.lineHeight;

lineWidthSpecifies the thickness of each individual bar in the barcode, allowing you to control how wide the printed barcode lines appear. Adjusting this value can help improve barcode readability for different scanners and printing methods.number

Specifies the thickness of each individual bar in the barcode, allowing you to control how wide the printed barcode lines appear. Adjusting this value can help improve barcode readability for different scanners and printing methods.

Default value

4
Try a demo showcasing the lineWidth property.

Examples

Markup and runtime examples for lineWidth:

HTML:

<smart-barcode line-width="4"></smart-barcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-barcode');
el.lineWidth = 6;

Read the current value:

const el = document.querySelector('smart-barcode');
const lineWidth = el.lineWidth;

renderAsSpecifies the rendering mode used to display the barcode, determining whether it is generated as a vector graphic (such as SVG), a raster image (such as PNG), or using another supported format. This setting affects the appearance, scalability, and performance of the rendered barcode."svg" | "canvas"

Specifies the rendering mode used to display the barcode, determining whether it is generated as a vector graphic (such as SVG), a raster image (such as PNG), or using another supported format. This setting affects the appearance, scalability, and performance of the rendered barcode.

Default value

"svg"
Try a demo showcasing the renderAs property.

Examples

Markup and runtime examples for renderAs:

HTML:

<smart-barcode render-as="svg"></smart-barcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-barcode');
el.renderAs = "canvas";

Read the current value:

const el = document.querySelector('smart-barcode');
const renderAs = el.renderAs;

typeSpecifies the format or symbology of the barcode to be generated (e.g., Code128, QR Code, EAN-13, UPC-A). This determines how the data will be encoded and displayed within the barcode."pharmacode" | "codabar" | "code128a" | "code128b" | "code128c" | "msi" | "msi10" | "msi11" | "msi1010" | "msi1110" | "ean13" | "ean8" | "code39" | "code93"

Specifies the format or symbology of the barcode to be generated (e.g., Code128, QR Code, EAN-13, UPC-A). This determines how the data will be encoded and displayed within the barcode.

Default value

"codabar"
Try a demo showcasing the type property.

Examples

Markup and runtime examples for type:

HTML:

<smart-barcode type="codabar"></smart-barcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-barcode');
el.type = "code128b";

Read the current value:

const el = document.querySelector('smart-barcode');
const type = el.type;

valueRetrieves the current value of the barcode or updates it with a new value. This property allows you to access the existing barcode data or assign a new barcode value programmatically.string

Retrieves the current value of the barcode or updates it with a new value. This property allows you to access the existing barcode data or assign a new barcode value programmatically.

Default value

""
Try a demo showcasing the value property.

Examples

Markup and runtime examples for value:

HTML:

<smart-barcode value="A2402B"></smart-barcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-barcode');
el.value = "example";

Read the current value:

const el = document.querySelector('smart-barcode');
const value = el.value;

widthSpecifies or retrieves the width of the barcode in pixels. If the width is set to 0, the barcode’s width will be automatically calculated based on its content and type. Use this property to define a fixed width for the barcode, or set it to 0 to allow automatic sizing for optimal readability.number

Specifies or retrieves the width of the barcode in pixels. If the width is set to 0, the barcode’s width will be automatically calculated based on its content and type. Use this property to define a fixed width for the barcode, or set it to 0 to allow automatic sizing for optimal readability.

Default value

0
Try a demo showcasing the width property.

Examples

Markup and runtime examples for width:

HTML:

<smart-barcode width="10"></smart-barcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-barcode');
el.width = 10;

Read the current value:

const el = document.querySelector('smart-barcode');
const width = el.width;

Events

invalidThis event is triggered whenever the scanned or entered barcode value does not meet the required validation criteria. It typically occurs when the barcode is missing, formatted incorrectly, or contains unsupported characters, allowing you to handle validation errors and provide appropriate feedback to the user.CustomEvent

This event is triggered whenever the scanned or entered barcode value does not meet the required validation criteria. It typically occurs when the barcode is missing, formatted incorrectly, or contains unsupported characters, allowing you to handle validation errors and provide appropriate feedback to the user.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onInvalid

Arguments

evCustomEvent
ev.detailObject
ev.detail.invalidCharacters - An array indicating the invalid characters.
ev.detail.lengthValidity - A boolean indicating the length validity.
ev.detail.patternValidity - A boolean indicating the pattern validity.
ev.detail.value - the invalid value of the barcode.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the invalid event.

Examples

Listen for invalid using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-barcode')?.addEventListener('invalid', (event) => {
    const detail = event.detail,
        invalidCharacters = detail.invalidCharacters,
        lengthValidity = detail.lengthValidity,
        patternValidity = detail.patternValidity,
        value = detail.value;

	// event handling code goes here.
})

Methods

export( format: string, fileName?: string): voidExports the generated barcode image or data for use outside the application. This function typically saves or downloads the barcode in formats such as PNG, JPEG, or SVG, making it accessible for printing, sharing, or integration with other systems.

Exports the generated barcode image or data for use outside the application. This function typically saves or downloads the barcode in formats such as PNG, JPEG, or SVG, making it accessible for printing, sharing, or integration with other systems.

Arguments

formatstring

The format of the exported file - svg, png, jpg

fileName?string

The name of the exported file

On the custom element in the DOM (narrow the selector, e.g. to #my-barcode, if you host multiple widgets):

document.querySelector('smart-barcode')?.export();

Try a demo showcasing the export method.

getDataURL( format: string): stringRetrieves the barcode image encoded as a Base64 string, allowing for convenient embedding or transmission of the barcode in web applications or APIs without needing a physical image file.

Retrieves the barcode image encoded as a Base64 string, allowing for convenient embedding or transmission of the barcode in web applications or APIs without needing a physical image file.

Arguments

formatstring

The dataURL format of the string - svg, png, jpg

Returnsstring

On the custom element in the DOM (narrow the selector, e.g. to #my-barcode, if you host multiple widgets):

const result = document.querySelector('smart-barcode')?.getDataURL("svg","png");

getDataURLAsync( format: string): objectRetrieves the barcode image encoded as a Base64 string, allowing you to easily embed or transmit the barcode in formats such as HTML, CSS, or JSON.

Retrieves the barcode image encoded as a Base64 string, allowing you to easily embed or transmit the barcode in formats such as HTML, CSS, or JSON.

Arguments

formatstring

The dataURL format of the string - svg, png, jpg

Returnsobject

On the custom element in the DOM (narrow the selector, e.g. to #my-barcode, if you host multiple widgets):

const result = document.querySelector('smart-barcode')?.getDataURLAsync("svg","png");

isValid(): booleanRetrieves the validation status of the barcode, indicating whether the scanned barcode meets the required format and integrity checks.

Retrieves the validation status of the barcode, indicating whether the scanned barcode meets the required format and integrity checks.

Returnsboolean

On the custom element in the DOM (narrow the selector, e.g. to #my-barcode, if you host multiple widgets):

const result = document.querySelector('smart-barcode')?.isValid();

Try a demo showcasing the isValid method.