print-form-field-component v1.0.4

Print form field component

The web component is intented to be used creating printable forms with html, it accepts four inputs:

intro-text

the lead text describing the field, which goes before the user input. The input is optional and can be omitted.

filled-text

the input provided by the user displayed on horizontal lines with optional notes put under the aforementioned lines.

notes

an optional string with notes. To put notes on different lines of user input they should be separated with a special symbol, a separator which is | by default

notes-separator

by default it is |, provide only if a different separator is chosen for notes.

The web component is styled using css variables, investigate the source style sheet for details.

Example form field component usage

<print-form-field-component 
    intro-text="Contractor: " 
    filled-text="John Doe" 
    notes="first name, second name"
    >
</print-form-field-component>

Using this component

Script tag

• Put a script tag <script src='https://unpkg.com/print-form-field-component@1.0.4/dist/print-form-field-component.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc