GithubHelp home page GithubHelp logo

formio / uswds Goto Github PK

View Code? Open in Web Editor NEW
11.0 15.0 8.0 82.98 MB

JavaScript Powered Forms for the United States Web Design System

Home Page: https://formio.github.io/uswds

License: Open Software License 3.0

JavaScript 53.27% TypeScript 5.74% CSS 5.01% HTML 2.31% SCSS 9.93% EJS 23.74%

uswds's Introduction

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/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/formiojs/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/formiojs/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/

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/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/formiojs/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/formiojs/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>

Example Application

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

https://formio.github.io/uswds

uswds's People

Contributors

alexandraramanenka avatar alexeydavyd avatar alina-softensity avatar antonsoftensity avatar brendanbond avatar dependabot[bot] avatar dianatsevan avatar heather-formio avatar lane-formio avatar maksimfalei avatar mikekotikov avatar olegkatuba avatar randallknutson avatar ryanformio avatar saz33m avatar travist avatar vishugowd avatar wag110894 avatar yuryrybak avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

wube-t-kifle cladley fairhopeweb pros-pano johnjianghappycoding mrcavalcanti swg2 proxidesk-code

uswds's Issues

[BUG] Update USWDS name

Can you please update the description for this repo to use System instead of Standard in the name of USWDS?

It currently says, "JavaScript Powered Forms for the United States Web Design Standard."

I would expect it to say, "JavaScript Powered Forms for the United States Web Design System."

Screen Shot 2020-07-22 at 5 22 09 PM

VPAT.JS?

as given in the accessibility guidance, I was looking for VPAT.js but couldn't find the file anywhere.

can you please help with it?

Trying to use the system, but parts missing

Looking to reuse this for our own Government Tell Us Once platform in Queensland, Australia

  1. I'm trying to piece together how the address component works.

I can see the actual form field here:

uswds/src/templates/uswds/address/form.ejs

Line 21 in c14f0fa

{% if (ctx.self.manualModeEnabled) { %}

But I can't find the definition for the form builder UI - where is the checkbox below defined: Can't find address? Switch to manual mode. Not in that repo it seems.
Pic1

  1. Can we extend the base to add another provider option? would be good if could have a provider tab on normal input fields so if the agency uses TUO and want's pre-fill it's optional to enable.

Pic2

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.