# Bar Code

Bar code component allows you to dynamically display any value as a QR code.

## How to add a static Bar Code

Drag and drop Bar Code component onto page and fill it with any value, such as URL.

{% @arcade/embed flowId="qEIZ7OjvAPCTHT7arAtg" url="<https://app.arcade.software/share/qEIZ7OjvAPCTHT7arAtg>" %}

## Bar Code component settings

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FwUXbF36jmQbxyYZF36oZ%2Fimage.png?alt=media&#x26;token=ae8ad1d3-1746-44fb-941d-2db4d8bd3f6b" alt=""><figcaption><p>Bar code settings</p></figcaption></figure>

* Component name
* General tab
  * [Format](#bar-code-formats)
  * Value
  * "Display code text" toggle
  * Fill Color
  * Background color
* Display tab
  * Conditional visibility
  * Spacing

### Bar code formats

List of supported bar code formats:

* CODE128 auto
* CODE128 A
* CODE128 B
* CODE123 C
* EAN13
* EAN8
* EAN5
* EAN2
* UPC
* CODE39
* ITF14
* ITF
* MSI
* MSI10
* MSI11
* MSI1010
* MSI1110
* Pharmacode
* Codabar

## How to pass values to Bar Code component

You can [pass any value](https://docs.jetadmin.io/user-guide/design-and-structure/components/layouts/overlays/overlay-parameters) to the component and it will output it as Bar Code.

Let's make an example of displaying SKU as a bar code, referencing the sku from selected row on a table.

You will need:

1. A table with SKU
2. Bar code component

### A table with SKU

Any [table](https://docs.jetadmin.io/user-guide/design-and-structure/components/lists/table) that has SKU as one of the columns will do.

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2Fgecb0B4meaLccK4W6aM9%2Fimage.png?alt=media&#x26;token=69622131-d716-4281-8a58-296184517e31" alt=""><figcaption><p>Table with products as an example</p></figcaption></figure>

### Bar Code and value formula

Add the QR Component anywhere on the page and click on *"Fx"* button to start typing in your formula. It should have this syntax:

<pre><code><strong>%component_to_reference%.selected_item.%value%
</strong></code></pre>

{% hint style="info" %}
In this example you won't have to type in formula at all, you can just click on the appropriate value from the side window
{% endhint %}

### Interactive guide with example

{% @arcade/embed flowId="sKAdeMwWIqlAvUKzHpLR" url="<https://app.arcade.software/share/sKAdeMwWIqlAvUKzHpLR>" %}