# Barcode
*** ## Tutorials | Name | Description | Illustration | | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- | -------------------------------- | | [**Generating and Displaying Barcodes for Product Codes**](/flow/tutorials/components/barcode/generating-and-displaying-barcodes-for-product-codes.md) | Learn to create and display product code barcodes in Salesforce efficiently and effectively. | ![](/files/PVTPu4uVD8FzoXB5boy1) | *** ## Changing the properties ### Customizing the barcode value The value for the barcode can be set in two ways. Firstly, you can manually enter the desired value for the barcode. Alternatively, the value can be sourced from one of your existing collections. To use a value from a collection, switch to the '[Mapped](/flow/getting-started/learn-the-basics.md#what-are-mapped-values)' input option and select the appropriate collection as your source.

Switch to Mapped input field to select a source collection as a value.

### Choosing the barcode type The Barcode component renders more than 150 different types of barcodes. Select the one you need.
Main types of Barcode supported * **UPC-A**: * **Description**: Universal Product Code, widely used in retail in the USA. * **Requirements**: Encodes 12 numerical digits. * **UPC-E**: * **Description**: Compressed version of UPC-A for smaller packages. * **Requirements**: Encodes 6 numerical digits. * **EAN-13**: * **Description**: International Article Number, used globally for retail products. * **Requirements**: Encodes 13 numerical digits. * **EAN-8**: * **Description**: A shorter version of EAN-13 for small items. * **Requirements**: Encodes 8 numerical digits. * **Code 128**: * **Description**: Highly versatile and can encode all 128 ASCII characters. * **Requirements**: Variable length, often used for packaging and shipping. * **Code 39**: * **Description**: Older type, can encode letters, numbers, and symbols. * **Requirements**: Variable length, less compact than Code 128. * **QR Code**: * **Description**: Two-dimensional barcodes that encode text, URLs, or other data. * **Requirements**: Variable length, can encode a significant amount of data. * **Data Matrix**: * **Description**: Two-dimensional code, often used in electronics and healthcare. * **Requirements**: Variable size, can encode text or raw data. * **Interleaved 2 of 5**: * **Description**: A numeric-only barcode is typically used in warehousing and distribution. * **Requirements**: Must have an even number of digits. * **Codabar**: * **Description**: Older format often used in libraries and blood banks. * **Requirements**: Variable length, can include numbers and a few special characters. * **PDF417**: * **Description**: A stacked, two-dimensional barcode used for documents and identification cards. * **Requirements**: Variable length, can encode large amounts of data. * **GS1 DataBar**: * **Description**: A family of barcodes used for fresh foods and coupons. * **Requirements**: Varies based on the specific GS1 DataBar type. * **Aztec Code**: * **Description**: Two-dimensional barcodes are used mainly in transportation tickets. * **Requirements**: Variable length, can encode significant amounts of data. * **ITF-14**: * **Description**: Used to mark cartons, cases, or pallets with an EAN-13 or UPC number. * **Requirements**: Encodes 14 numerical digits.
*** ## Specifications {% tabs %} {% tab title="🎛️ Attributes" %}
NameTypeDescription
ValueStringThe Value to encode in the barcode.
TypeStringThe type of barcode to render.
Hide ValueBooleanIf present, hide the value of the barcode.
ChecksumBooleanIf present, show the checksum value.
{% endtab %} {% tab title="🎨 Styling" %} | Setting | Description | Notes | | ------------------ | --------------------------------------------- | ------------------------------------------------------- | | **Background** | Changes the background color of the barcode. | Choose any color to match your design. | | **Color** | Alters the color of the barcode stripes. | Select a color that contrasts well with the background. | | **Text Color** | Modifies the color of the barcode value text. | Ensure readability with a contrasting text color. | | **Text Alignment** | Adjusts the position of the barcode value. | Options include left, center, or right alignment. | | **Height** | Sets the height of the barcode. | Adjust according to the space available. | | **Width** | Defines the width of the barcode. | Choose a width that fits your layout. | | {% endtab %} | | | | {% endtabs %} | | | --- # 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.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.