# Barcode / QR

The **Barcode** widget uses the device's camera to scan and decode a wide variety of barcode formats, including QR codes and traditional product barcodes.

When activated, it opens a full-screen camera view. Once a barcode is detected, the widget automatically captures its value and closes the scanner, providing a seamless experience for data entry and product identification tasks.

<figure><img src="https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2F3aMdVj1impznkg1UaL9Z%2Fcreate_barcod_QR_looped.gif?alt=media&#x26;token=16ac1608-c5e4-4475-97e8-e64ed803e81d" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2FaNZBokkGwz2LdvJzmxA1%2FScreenshot%202025-06-10%20at%2016.15.06.png?alt=media&#x26;token=90665700-385b-493f-a01f-0e44f3e54f3a" alt=""><figcaption><p>The Barcode/QR-Code scanner button in the UI</p></figcaption></figure>

## Data Binding

Connect the widget to your application's logic by dragging the corresponding items from the Flow Builder.

### Input

| **Property**  | **Type**                | **Description**                                                                                                                                                                              |
| ------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`barcode`** | `String\|Array<String>` | <p>Fired when a barcode is successfully scanned. The payload is the text content decoded from the barcode.<br>In scan mode <code>multiple</code> the result is an array of the contents.</p> |

### Output

| **Property** | **Type**  | **Description**                                                                   |
| ------------ | --------- | --------------------------------------------------------------------------------- |
| **`clear`**  | `Boolean` | When `true`, clears the last scanned barcode value from your application's state. |

## Configuration

### Settings

The barcode scanner is launched by a button. You can customize its appearance using standard button properties. Common properties include:

* **`scanMode`**: Whether to scan a single or multiple barcodes while the camera is active.&#x20;
* **`text`**: The text displayed on the button (e.g., "Scan Barcode").
* **`icon`**: The icon displayed on the button (e.g., "fa-thin fa-barcode-scan").
* **`type`**: The button's style type (`normal`, `default`, `success`, `danger`).
* **`stylingMode`**: The visual style of the button (`text`, `outlined`, `contained`).