This repository will change the rendering of forms in formio.js so that it uses html and classes compatible with the United States Web Design System framework.
import uswds from '@formio/uswds';
import { Formio } from '@formio/js';
Formio.use(uswds);Or if you would like to embed directly within your website, you can use the following.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/css/uswds.min.css">
<link rel="stylesheet" href="https://cdn.form.io/js/formio.form.min.css">
<link rel="stylesheet" href="https://cdn.form.io/uswds/uswds.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/js/uswds.min.js"></script>
<script src="https://cdn.form.io/js/formio.form.min.js"></script>
<script src="https://cdn.form.io/uswds/uswds.min.js"></script>
</head>
<body>
<div id="formio"></div>
<script type="text/javascript">
Formio.use(uswds);
Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');
</script>
</body>
</html>You can try out this by going to the following JSFiddle - https://jsfiddle.net/travistidwell/yrwp9m24/1/
In addition to being a Form Renderer, you can also use this library to embed the Form.io Form Builder within your own application using the following.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/css/uswds.min.css">
<link rel="stylesheet" href="https://cdn.form.io/js/formio.full.min.css">
<link rel="stylesheet" href="https://cdn.form.io/uswds/uswds.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/3.1.0/js/uswds.min.js"></script>
<script src="https://cdn.form.io/js/formio.full.min.js"></script>
<script src="https://cdn.form.io/uswds/uswds.min.js"></script>
</head>
<body>
<div id="builder"></div>
<script type="text/javascript">
Formio.use(uswds);
Formio.builder(document.getElementById('builder'));
</script>
</body>
</html>For an example of how this platform works, please see the following application.