# Configuration Options

The Barcode provides a set of configuration options, which enable you to fine-tune its behavior.

The following configuration settings are supported by the Barcode:

* [Setting the Barcode size](https://www.telerik.com/kendo-react-ui-develop/components/barcodes/barcode/configuration#size)
* [Setting the color and background color](https://www.telerik.com/kendo-react-ui-develop/components/barcodes/barcode/configuration#color-and-background)
* [Setting the border width and color](https://www.telerik.com/kendo-react-ui-develop/components/barcodes/barcode/configuration#border)
* [Configuring the text label and checksum](https://www.telerik.com/kendo-react-ui-develop/components/barcodes/barcode/configuration#text-and-checksum)

## Size

To set the Barcode dimensions, use either of the following approaches:

* Use CSS rules to set the size of the Barcode or its container.
* Use the [`width`](https://www.telerik.com/kendo-react-ui-develop/components/barcodes/api/barcodeprops#width) and [`height`](https://www.telerik.com/kendo-react-ui-develop/components/barcodes/api/barcodeprops#height) props to set the dimensions in pixels.

> If the Barcode width is insufficient for the current value and Barcode type, the component will throw an error. Always test the application with the values you expect to see in actual use.

[Demo Source](https://demos.telerik.com/kendo-react-ui/barcodes/barcode/configuration/size/func/source.txt)

## Color and Background

To customize the Barcode foreground and background color, set the [`color`](https://www.telerik.com/kendo-react-ui-develop/components/barcodes/api/barcodeprops#color) and [`background`](https://www.telerik.com/kendo-react-ui-develop/components/barcodes/api/barcodeprops#background) props. You can further extend the background by specifying an optional [`padding`](https://www.telerik.com/kendo-react-ui-develop/components/barcodes/api/barcodeprops#padding).

> Ensure that the chosen color combination provides adequate contrast and test it with the typical readers you intend to target.

[Demo Source](https://demos.telerik.com/kendo-react-ui/barcodes/barcode/configuration/color/func/source.txt)

## Border

The Barcode can display a simple rectangular [`border`](https://www.telerik.com/kendo-react-ui-develop/components/barcodes/api/barcodeprops#border) as part of itself. You can create more complex borders by using CSS.

[Demo Source](https://demos.telerik.com/kendo-react-ui/barcodes/barcode/configuration/border/func/source.txt)

## Text and Checksum

To configure the Barcode text label appearance, set the [`text`](https://www.telerik.com/kendo-react-ui-develop/components/barcodes/api/barcodeprops#text) configuration.

Optionally, set [`checksum`](https://www.telerik.com/kendo-react-ui-develop/components/barcodes/api/barcodeprops#checksum) to `true` to display the value checksum for the selected [symbology](https://www.telerik.com/kendo-react-ui-develop/components/barcodes/barcode/types).

[Demo Source](https://demos.telerik.com/kendo-react-ui/barcodes/barcode/configuration/text/func/source.txt)

## Suggested Links

* [Barcode Types](https://www.telerik.com/kendo-react-ui-develop/components/barcodes/barcode/types)
* [API Reference of the Barcode](https://www.telerik.com/kendo-react-ui-develop/components/barcodes/api/barcodeprops)