TypeScript icon, indicating that this package has built-in type declarations

    1.0.0-alpha.56 • Public • Published

    Form.io Components

    The @utrecht/component-library-formio package contains implementations of various form related components. It currently is a mix of CSS components and Web components. This means you need to install the following three packages:


    npm install --save-dev \
      @utrecht/component-library-css \
      @utrecht/component-library-formio \

    Additionally, having the core Form.io packages installed is a prerequisite:

    npm install --save-dev formiojs react-formio

    Configure Form.io to use our custom components instead by including the following code in your app once:

    import { Formio, Templates } from "react-formio";
    import { components, templates } from "@utrecht/component-library-formio";
    Formio.use({ components });
    Templates.current = templates;

    Since the implementation of the web components needs to be loaded in the browser, include the following effect to import web component library from @utrecht/web-component-library-stencil, in Next.js this would be in _app.ts:

    useEffect(() => {
    }, []);

    Create a form

    Because the components use Web components internally, it is important to include the web components in the allow list of DOMPurify, which would otherwise remove these essential custom elements as part of the cross-site scripting mitigations:

    import { Form } from 'react-formio';
    import { sanitizeConfig } from "@utrecht/component-library-formio";
    export const Page () => (<Form options={{ sanitizeConfig }}/>)

    Every <Form> element must be configured with the correct sanitizeConfig settings, otherwise the form inputs cannot be displayed.


    To use the Utrecht theme for the components, include the design tokens CSS in your angular.json:

    npm install --save-dev @utrecht/design-tokens

    Include the CSS variables in your page.

    import "@utrecht/design-tokens/dist/index.css";


    npm i @utrecht/component-library-formio

    DownloadsWeekly Downloads






    Unpacked Size

    39.4 kB

    Total Files


    Last publish


    • littlebobbytabl.es
    • yolijn
    • nl-design-system-ci