FMX Prototype Pipeline

Scanner Field

Scan-enabled input: type a code or tap the scan button to decode a QR/barcode with the device camera (code-only — no Figma master yet).

<ScannerField
  placeholder="Scan or type an asset tag"
  scanLabel="Scan asset tag"
/>

<ScannerField defaultValue="AHU-01" />

<ScannerField defaultValue="bad value" error />

<ScannerField defaultValue="locked" disabled />

Props

onScan:(text: string, format: string) => void

Fires after a successful scan, in addition to the normal onChange path — wire scan-to-lookup here.

formats:ScanFormat[]= DEFAULT_SCAN_FORMATS

Decode formats (zxing names). Default: QR, Data Matrix, Code 128/39, EAN-13/8, UPC-A/E.

scanLabel:string= "Scan a code"

Scan button aria-label and camera overlay title.

error:boolean= false

Error border treatment.

disabled:boolean= false

Disabled state.

value / defaultValue:string

Controlled or uncontrolled value; scans flow through onChange either way.

Tokens