# 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="/files/F3pGaVBW35Ha3WISMrHE" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/I7M1Uk3bhVQav5bjqwvx" 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`).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.heisenware.com/app-builder/build-frontend/widgets/input-widgets/barcode-qr.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.