> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/barcode.md).
# Barcode
## Overview
The Avonni Barcode renders a barcode image directly on a Flow screen from any value you provide. Use it to display product codes, shipping labels, ticket IDs, or any data that needs to be scannable by a reader.
***
## Tutorials
| Name | Description | Illustration |
| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | -------------------------------- |
| [**Generating and Displaying Barcodes for Product Codes**](/flow/tutorials/projects/generating-and-displaying-barcodes-for-product-codes.md) | Learn to create and display product code barcodes in Salesforce efficiently and effectively. |  |
***
## Configuration
To configure it, click the component on the Flow screen. The Edit Barcode Component panel opens on the right with two tabs: Properties and Style. The sections below mirror the Properties tab.
### Properties
**Value** (Required) — the data to encode in the barcode. You can type a value directly, or switch to the mapped input and select a flow variable or record field.
Switch to Mapped input field to select a source collection as a value.
**Type** (Required) — the barcode format to render. The component supports more than 150 types. The most commonly used formats are listed below:
Main types of Barcode supported
* **UPC-A**: Universal Product Code, widely used in retail in the USA. Encodes 12 numerical digits.
* **UPC-E**: Compressed version of UPC-A for smaller packages. Encodes 6 numerical digits.
* **EAN-13**: International Article Number, used globally for retail products. Encodes 13 numerical digits.
* **EAN-8**: A shorter version of EAN-13 for small items. Encodes 8 numerical digits.
* **Code 128**: Highly versatile — can encode all 128 ASCII characters. Variable length; often used for packaging and shipping.
* **Code 39**: Can encode letters, numbers, and symbols. Variable length; less compact than Code 128.
* **QR Code**: Two-dimensional barcode that encodes text, URLs, or other data. Variable length; can encode a significant amount of data.
* **Data Matrix**: Two-dimensional code used in electronics and healthcare. Variable size; can encode text or raw data.
* **Interleaved 2 of 5**: Numeric-only barcode used in warehousing and distribution. Must have an even number of digits.
* **Codabar**: Older format used in libraries and blood banks. Variable length; can include numbers and a few special characters.
* **PDF417**: Stacked, two-dimensional barcode used for documents and identification cards. Variable length; can encode large amounts of data.
* **GS1 DataBar**: A family of barcodes used for fresh foods and coupons. Varies by specific GS1 DataBar type.
* **Aztec Code**: Two-dimensional barcodes used mainly in transportation tickets. Variable length; can encode significant amounts of data.
* **ITF-14**: Used to mark cartons, cases, or pallets with an EAN-13 or UPC number. Encodes 14 numerical digits.
**Hide Value** — when enabled, the human-readable text that normally appears below the barcode is hidden. The barcode image remains visible.
**Checksum** — when enabled, the checksum digit is shown in the displayed value below the barcode.
**Alternative Text** — accessible text description of the barcode for screen readers.
**Height** — sets the maximum height of the barcode. Any CSS length unit is accepted; unitless values are treated as pixels.
**Width** — sets the maximum width of the barcode. Any CSS length unit is accepted; unitless values are treated as pixels.
***
## Styling
The **Style** tab gives you control over the barcode's spacing, border, and dimensions. Configure it from the **Style** tab of the barcode's property editor.
{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the barcode, creating space between it and other elements on the screen.
* **Top / Right / Bottom / Left:** Adjust the space on each side of the barcode.
{% endtab %}
{% tab title="Padding" %}
Controls the *inner* spacing between the barcode and its border.
* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
{% endtab %}
{% tab title="Border" %}
Customizes the border surrounding the barcode.
* **Color:** Set the border color.
* **Size:** Adjust the border thickness.
* **Style:** Choose a border style (e.g. solid, dashed, dotted).
* **Radius:** Control the roundness of the corners.
{% endtab %}
{% tab title="Size" %}
Controls the barcode's dimensions.
* **Width / Height:** Set fixed dimensions for the barcode.
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
* **Overflow:** Control how content that exceeds the bounds is handled.
{% endtab %}
{% endtabs %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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.avonnicomponents.com/flow/flow-components/barcode.md?ask=
```
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.