bc-formio-template-extend
v1.0.1
Published
Extension of Formio JS's template for formio components following web accessibility
Readme
Formio Component Template Extension
This extension addresses accessibility issues in Formio.js components.
✅ Currently Supported:
- Radio component
⚠️ Note: The browser (IIFE) version has been tested. CommonJS (CJS) and ES module (ESM) versions still need validation in real-world projects.
📦 Installation
There are three builds available:
cjs– CommonJS (for Node.js environments)es– ES Modules (for bundlers like Vite, Rollup, Webpack)iife– Browser-ready standalone version (via<script>tag)
✅ Install via NPM
npm install bc-formio-template-extendOr use directly via Unpkg CDN
🧑💻 Usage
⛔ Important:
Do not run this inside Formio.createForm().then(...).
This must run before Formio initializes the form.
🔹 ESM (ES Module via CDN or bundler)
📁 Source file: dist/es/index.js
import { render } from 'https://unpkg.com/[email protected]/dist/es/index.js';
Formio.use(gds); // if using UKGDS theme
const GDSTemplateExt = new render();
GDSTemplateExt.initAll();
Formio.createForm(/* ... */);
🔹 IIFE (Browser global via <script> tag)
📁 Source file:
dist/iife/index.js
<body>
<script src="https://unpkg.com/formiojs@latest/dist/formio.full.min.js"></script>
<!-- Your GDS source -->
<script src="https://unpkg.com/[email protected]/dist/iife/index.js"></script>
<script>
Formio.use(gds); // required UKGDS template is used
const GDSTemplateExt = new FormiojsCustomTemplate();
GDSTemplateExt.initAll();
Formio.createForm(/* ... */);
</script>
</body>📌 Notes
This package modifies Formio's Templates.current.radio and injects UKGDS-compliant styles.
If you're using a custom Formio builder, ensure this runs before form instantiation.
🧠 Inspiration
This project is inspired by Form.io’s official guide on overriding templates.