# Barcode

Barcodes and QR codes in one component.

## How to use it

format defines the encoding. EAN and UPC require valid values and check digits. onError and fallback handle invalid input.



## Import


```tsx
import { Barcode } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<Barcode value="KIVORA-2026" format="code128" width={280} displayValue />
```


## QR code

```tsx
<Barcode format="qrcode" value="https://kivora.pro" width={180} height={180} />
```


## EAN-13

```tsx
<Barcode value="5901234123457" format="ean13" width={280} displayValue />
```


## API: Barcode


```typescript
Barcode: React.ForwardRefExoticComponent<BarcodeProps & React.RefAttributes<HTMLDivElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| value | string | Yes | Controlled value. Update it from the change callback. |
| aria-label | string | No | Accessible name of the control. |
| background | string | No | Opaque #RRGGBB background color. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| displayValue | boolean | No | Show the code's readable value. |
| errorCorrectionLevel | "L" \| "M" \| "Q" \| "H" | No | QR error correction level. |
| fallback | ReactNode | No | Alternative content when the main content cannot be displayed. |
| foreground | string | No | Opaque #RRGGBB color for modules. |
| format | "qrcode" \| "code128" \| "code39" \| "ean13" \| "ean8" \| "upca" \| "interleaved2of5" \| "datamatrix" \| "pdf417" \| "azteccode" | No | Barcode format. |
| height | number | No | Output height. |
| id | string | No | Element identifier; associates labels and descriptions. |
| margin | number | No | Code margin. Keep a sufficient quiet zone. |
| onChange | ChangeEventHandler<HTMLDivElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLDivElement> | No | Action performed when the element is activated. |
| onError | ((error: Error) => void) | No | Receives errors for the application to handle. |
| onSubmit | SubmitEventHandler<HTMLDivElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |
| width | number | No | Output width. |

Source: https://kivora.pro/docs/componentes/barcode