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.
For the latest documentation, release information, and guides, always refer to the official Form.io Help Documentation available here:
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>
<meta charset="UTF-8" />
<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.