Fluxo UIFluxo UIv0.4.1

Barcode

Encode any string as a 1D barcode and render it as inline SVG.

Basic Usage

Default Barcode

Pick a format, type your value, and scan with a barcode reader app on your phone to verify. Invalid inputs render an inline error.

<Barcode value="FLUXO-UI-2026" format="CODE128" />

Formats

Supported Formats

Six 1D symbologies cover almost every use case.

CODE128Most flexible — alphanumeric + symbols
CODE3943-char uppercase alphabet
EAN1312 or 13 digits, retail
EAN87 or 8 digits, small packages
UPC11 or 12 digits, US retail
ITFEven-length digits, logistics
<Barcode format="CODE128" value="FLUXO-UI-2026" />
<Barcode format="EAN13" value="4006381333931" />

Customization

Visual Customization

Tune bar width, height, color, margin, and the human-readable text below.

2px80px10px#1f2937on
<Barcode
  value="HELLO"
  format="CODE39"
  width={3}
  height={100}
  foreground="#3b82f6"
  background="var(--eui-bg)"
  fontSize={16}
  displayValue
/>

Import

import { Barcode } from 'fluxo-ui';
import type { BarcodeProps, BarcodeFormat } from 'fluxo-ui';

Props

valuereq
string

Value to encode (numeric for EAN/UPC/ITF, alphanumeric for CODE39/CODE128)

formatreq
'CODE128' | 'CODE39' | 'EAN13' | 'EAN8' | 'UPC' | 'ITF'

Barcode symbology

width
number"2"

Width of the narrowest bar in px

height
number"80"

Bar height in px

displayValue
boolean"true"

Show the human-readable text below the bars

font
string"'inherit'"

Font family for the human-readable text

fontSize
number"14"

Font size for the human-readable text

textMargin
number"6"

Vertical gap between bars and text

foreground
string"'#000000'"

Bar and text color. Default is black for maximum scannability — CSS variables that flip with dark mode are NOT recommended (most barcode scanners reject light-on-dark)

background
string"'#ffffff'"

Background color. Default is white for maximum scannability. Use 'transparent' to omit

margin
number"10"

Quiet zone in px on each side

onError
(err: Error) => void

Fired when input is invalid for the chosen format

id
string

HTML id attribute

className
string

Additional CSS classes

alt
string

Accessible label override

Features

6 Symbologies

CODE128, CODE39, EAN13, EAN8, UPC, ITF — covering retail, logistics, and general use cases.

Built-in Validation

Each format validates input and surfaces an inline error via onError; checksums are computed automatically.

Inline SVG

Renders crisp at any zoom. Foreground/background accept any CSS color including theme variables.