formio/uswds-viewer

Verified Publisher

By Form.io

Updated 6 days ago

USWDS Viewer for Form.io PDF Server

Image
Security
Web servers
Content management system
1

10K+

formio/uswds-viewer repository overview

Form.io United States Web Design System Templates

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.

Usage

import uswds from '@formio/uswds';
import { Formio } from 'formiojs';
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/uswds/2.6.0/css/uswds.min.css">
        <link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
        <link rel="stylesheet" href="dist/uswds.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.6.0/js/uswds.min.js"></script>
        <script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
        <script src="dist/uswds.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>

Form Builder

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/uswds/2.6.0/css/uswds.min.css">
        <link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
        <link rel="stylesheet" href="dist/uswds.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.6.0/js/uswds.min.js"></script>
        <script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
        <script src="dist/uswds.js"></script>
    </head>
    <body>
        <div id="builder"></div>
        <script type="text/javascript">
            Formio.use(uswds);
            Formio.builder(document.getElementById('builder'));
        </script>
    </body>
</html>

Example Application

For an example of how this platform works, please see the following application.

https://formio.github.io/uswds

Tag summary

Content type

Image

Digest

sha256:3f8f80ba6

Size

1.6 GB

Last updated

6 days ago

docker pull formio/uswds-viewer

This week's pulls

Pulls:

749

Last week