Barcode input

Introduction

The barcode input type is a standalone input published by FormKit. It is powered by the zxing library and allows scanning of a variety of 1D and 2D barcode types using cameras connected to your browsing device.

Open Source

The full source code for the barcode input is available on GitHub.

Installation

To install the barcode input add the @formkit/barcode package to your project's dependencies.

npm install @formkit/barcode

Then, in your FormKit configuration file import the input and its styles. Then add the input to your global FormKit configuration.

// formkit.config
...
import { barcode } from '@formkit/barcode'
import '@formkit/barcode/genesis'

...

const config = defaultConfig({
  inputs: {
    barcode
  }
})

...

Usage

Basic

You can now use the barcode input type in your <FormKit /> components. By interacting with the barcode icon you can open an overlay with a video feed from a connected camera. You will need to approve access to the camera via your browser.

<FormKit  type="barcode"  label="Barcode"  help="Please scan a barcode"/>

import { defineFormKitConfig } from '@formkit/vue'import { genesisIcons } from '@formkit/icons'import { rootClasses } from '~/formkit.theme'import { barcode } from '@formkit/barcode'export default defineFormKitConfig({  inputs: {    barcode,  },  icons: {    ...genesisIcons,  },  config: {    rootClasses,  },})

Customizing target barcodes

By default the barcode input will scan every supported barcode type. The list of target barcode formats can be changed using the formats prop. A full list of supported formats can be seen in the zxing documentation. All format names will be uppercased with _ separators. So QR Code becomes QR_CODE, UPC-A becomes UPC_A, etc.

<FormKit  type="barcode"  label="UPC-A Scanner"  help="I only scan UPC-A barcodes"  :formats="['UPC_A']"/><FormKit  type="barcode"  label="QR Code Scanner"  help="I only scan QR codes"  :formats="['QR_CODE']"/>

import { defineFormKitConfig } from '@formkit/vue'import { genesisIcons } from '@formkit/icons'import { rootClasses } from '~/formkit.theme'import { barcode } from '@formkit/barcode'export default defineFormKitConfig({  inputs: {    barcode,  },  icons: {    ...genesisIcons,  },  config: {    rootClasses,  },})

Props & Attributes

Sections

You can target a specific section of an input using that section's "key", allowing you to modify that section's classes, HTML (via :sections-schema, or content (via slots)). Read more about sections here.