Barcode input


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.

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

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



The barcode input has a dependency on @zxing/library which is rather heavy (about 100kb minified + gzipped). You should only include this input in your project if you specifically need barcode scanning capability via connected cameras. For manual barcode entry please consider using a mask or text input with custom validation rules.

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: {




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.

Load live example

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.

Load live example

Props & Attributes

formatsArray[]An array of available formats in uppercase with _ separators (eg. QR_CODE) from the available set on the zxing documentation. If no formats array is provided then all parsable code formats will be considered valid inputs.
barcode-iconStringinline SVG codeSpecifies an icon to put in the barcodeIcon section. The barcodeIcon section is hidden while the camera interface is loading.
loader-iconStringspinnerSpecifies an icon to put in the loaderIcon section. The loaderIcon section is shown while the camera interface is loading.
close-iconStringcloseSpecifies an icon to put in the closeIcon section.
Show Universal props
configObject{}Configuration options to provide to the input’s node and any descendent node of this input.
delayNumber20Number of milliseconds to debounce an input’s value before the commit hook is dispatched.
dirtyBehaviorstringtouchedDetermines how the "dirty" flag of this input is set. Can be set to touched or comparetouched (the default) is more performant, but will not detect when the form is once again matching its initial state.
errorsArray[]Array of strings to show as error messages on this field.
helpString''Text for help text associated with the input.
idStringinput_{n}The unique id of the input. Providing an id also allows the input’s node to be globally accessed.
ignoreBooleanfalsePrevents an input from being included in any parent (group, list, form etc). Useful when using inputs for UI instead of actual values.
indexNumberundefinedAllows an input to be inserted at the given index if the parent is a list. If the input’s value is undefined, it inherits the value from that index position. If it has a value it inserts it into the lists’s values at the given index.
labelString''Text for the label element associated with the input.
nameStringinput_{n}The name of the input as identified in the data object. This should be unique within a group of fields.
parentFormKitNodecontextualBy default the parent is a wrapping group, list or form — but this props allows explicit assignment of the parent node.
prefix-iconString''Specifies an icon to put in the prefixIcon section.
preservebooleanfalsePreserves the value of the input on a parent group, list, or form when the input unmounts.
preserve-errorsbooleanfalseBy default errors set on inputs using setErrors are automatically cleared on input, setting this prop to true maintains the error until it is explicitly cleared.
sections-schemaObject{}An object of section keys and schema partial values, where each schema partial is applied to the respective section.
suffix-iconString''Specifies an icon to put in the suffixIcon section.
typeStringtextThe type of input to render from the library.
validationString, Array[]The validation rules to be applied to the input.
validation-visibilityStringblurDetermines when to show an input's failing validation rules. Valid values are blur, dirty, and live.
validation-labelString{label prop}Determines what label to use in validation error messages, by default it uses the label prop if available, otherwise it uses the name prop.
validation-rulesObject{}Additional custom validation rules to make available to the validation prop.
valueAnyundefinedSeeds the initial value of an input and/or its children. Not reactive. Can seed entire groups (forms) and lists..


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.


Scan a code.
Barcode is required.


barcodeIconAn element for outputting a barcode icon that toggles the camera overlay.
loaderIconAn element for outputting a loader icon that shows in place of the barcodeIcon while the camera interface is loading.
dialogThe dialog element (by default a native HTML dialog) that contains the camera interface.
scannerContainerA wrapper around the close icon, video stream, and decorative scanning overlay.
closeIconAn element for outputting a close icon for the dialog.
videoA native HTML video element that shows the connected camera feed.
overlayA decorative element that overlays a portion of the video to mimic a scanning interface.
overlayDecoratorsA container for the overlay decorators that frame a portion of the video feed.
overlayDecoratorTopLeftA decorative element for framing a portion of the video feed.
overlayDecoratorTopRightA decorative element for framing a portion of the video feed.
overlayDecoratorBottomLeftA decorative element for framing a portion of the video feed.
overlayDecoratorBottomRightA decorative element for framing a portion of the video feed.
laserA decorative element that imitates a scanning laser.
Show Universal section keys
outerThe outermost wrapping element.
wrapperA wrapper around the label and input.
labelThe label of the input.
prefixHas no output by default, but allows content directly before an input element.
prefixIconAn element for outputting an icon before the prefix section.
innerA wrapper around the actual input element.
suffixHas no output by default, but allows content directly after an input element.
suffixIconAn element for outputting an icon after the suffix section.
inputThe input element itself.
helpThe element containing help text.
messagesA wrapper around all the messages.
messageThe element (or many elements) containing a message — most often validation and error messages.