---
title: Code Scan
description: "Scans QR codes or barcodes using the device camera and stores the scanned value. The field also supports manual input in a single-line text field. ## Use Cases - Capture product barcodes in the editor - Scan QR codes for…"
url: "https://racmanuel.dev/docs/custom-fields-booster/code-scan/"
updated: "2026-02-24"
category: Custom Fields Booster
tags:
  - Free
---

# Code Scan

Scans QR codes or barcodes using the device camera and stores the scanned value.

The field also supports manual input in a single-line text field.

## Use Cases

- Capture product barcodes in the editor
- Scan QR codes for asset tracking
- Store serial numbers from labels
- Quick entry of inventory IDs
- Validate labels during content entry

## Field Preview

A text input with Scan and Clear buttons, plus a modal scanner UI.

## How to Use

1. Add the Code Scan field to a Field Group.
2. Set a placeholder if needed.
3. Configure **FPS** and **QR Box** size.
4. Enable **Auto close after scan** if desired.
5. Enable **Remember last camera** if desired.
6. Choose **Trim value** and **Uppercase** behavior.
7. Save the Field Group and use Scan in the editor.

## Field Settings

| Setting | Description | Default |
| --- | --- | --- |
| Placeholder | Text shown when field is empty | Scan result will appear here… |
| FPS | Frames per second for scanning | 10 |
| QR Box | Size (px) of the scanning box | 250 |
| Auto close after scan | Close the scanner modal after a successful scan | 1 |
| Remember last camera | Store last used camera in localStorage | 1 |
| Trim value | Trim whitespace from scanned value | 1 |
| Uppercase | Convert scanned value to uppercase | 0 |

## Value & Storage

Saved as: Post meta

Storage type: String

Return format: string

REST format: not specified

Important details:

- Optional trimming and uppercasing are applied before saving.
- Value is sanitized with `sanitize_text_field()`.

## Output Examples

### PHP

```php
$value = get_field('my_code_scan');

if (is_string($value) && $value !== '') {
    echo esc_html($value);
}
```

### Twig

```php
{% set value = fn('get_field', 'my_code_scan') %}
{% if value %}
  {{ value|e }}
{% endif %}
```

## Compatibility

- Repeaters
- Flexible Content
- Options Pages
- Frontend forms (acf_form)
- REST API
- Multisite

## Hooks (Developer)

### Hooks Summary

| Hook | Type | Purpose |
| --- | --- | --- |
| custom_fields_booster_code_scan_defaults | Filter | Modify default settings. |
| custom_fields_booster_code_scan_supports | Filter | Modify ACF support flags. |
| custom_fields_booster_code_scan_before_render | Action | Run logic before rendering UI. |
| custom_fields_booster_code_scan_after_render | Action | Run logic after rendering UI. |
| custom_fields_booster_code_scan_instance_id | Filter | Modify instance id. |
| custom_fields_booster_code_scan_input_atts | Filter | Modify input attributes. |
| custom_fields_booster_code_scan_before_settings | Action | Run logic before rendering settings UI. |
| custom_fields_booster_code_scan_after_settings | Action | Run logic after rendering settings UI. |
| custom_fields_booster_code_scan_before_enqueue | Action | Run logic before enqueuing assets. |
| custom_fields_booster_code_scan_after_enqueue | Action | Run logic after enqueuing assets. |
| custom_fields_booster_code_scan_load_value | Filter | Modify value after loading. |
| custom_fields_booster_code_scan_validate_value | Filter | Modify validation result. |
| custom_fields_booster_code_scan_update_value | Filter | Modify value before saving. |
| custom_fields_booster_code_scan_format_value | Filter | Modify value returned by `get_field()`. |

### Filters

**Filter:** `custom_fields_booster_code_scan_input_atts`

Purpose: Modify input HTML attributes.

When: You need to add data attributes for custom JS.

```php
add_filter('custom_fields_booster_code_scan_input_atts', function ($atts, $field, $field_instance) {
    $atts['data-custom'] = '1';
    return $atts;
}, 10, 3);
```

### Actions

**Action:** `custom_fields_booster_code_scan_before_render`

Runs before rendering the field UI.

```php
add_action('custom_fields_booster_code_scan_before_render', function ($field, $field_instance) {
    // Pre-render logic.
}, 10, 2);
```

## Assets

This field enqueues assets whenever the input is rendered (admin and frontend via `acf_form()`):

- `admin/js/libs/html5-qrcode.min.js`
- `admin/js/cfb-field-code-scan.js`
- `admin/css/cfb-field-code-scan.css`

## REST API

Schema: not specified

## REST Validation

Validation uses `validate_value()` on REST writes.

## Security & Escaping

- Saved value is sanitized with `sanitize_text_field()`.
- Optional trimming and uppercasing are applied before saving.
- Field HTML output escapes all attributes and UI labels.

## Notes / Limitations

- Scanner UI depends on camera access and the bundled `html5-qrcode` library.

## Changelog

- 1.0.0 — Initial release