Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @forter/form with all npm packages installed. Try it out:

var form = require("@forter/form")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@forter/form v1.3.12

form from Forter Components

fc-form

An element to be used as container for form fields

Usage

<script>
   import '@forter/form';
</script>
<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="text" path="dog.name.firstName" label="dog first name" placeholder="Enter dog name.."></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.."></fc-form-field>
         <fc-form-field type="currency" currencysymbol="₪" path="dog.money" label="dog amount of money" placeholder="Enter money.."></fc-form-field>
         <fc-form-field type="date" path="dog.birthDate" value="1590065478943" label="birth date"></fc-form-field>
         <fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]'></fc-form-field>
         <fc-form-field type="dropdown" clearable="" path="dog.height" label="dog height" placeholder="select dog height" options='["short", "medium", "tall"]'></fc-form-field>
         <fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
         <fc-form-field type="button-group" path="dog.size" label="dog size" options='["big", "small", "medium"]' single-selection></fc-form-field>
         <fc-form-field type="select" path="dog.color" label="dog color" placeholder="Select" single-selection><option value="grey">grey color</option><option value="brown">brown color</option></fc-form-field>
     </fc-form-section>
     <fc-form-section>
        <fc-form-field type="text" path="dog.name.lastName" label="dog last name" placeholder="Enter dog name.."></fc-form-field>
     </fc-form-section>
</fc-form>

Examples


<!-- Sample:single section -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.."></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.."></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample:single section with tags, dropdowns and text -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.."></fc-form-field>
         <fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]'></fc-form-field>
         <fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample: default values -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="tags" path="dog.breed" label="dog breed">
             <option value="terrier" default>Terrier</option>
             <option value="labrador">Labrador</option>
             <option value="german shepherd">German Shepherd</option>
         </fc-form-field>
         <fc-form-field type="dropdown" path="dog.food" label="dog food">
             <option value="bones">Bones</option>
             <option value="carrots">Carrots</option>
             <option value="fish" default>Fish</option>
         </fc-form-field>
            <fc-form-field type="button-group" path="dog.ageCategory" label="dog age category">
             <option value="1">0-3</option>
             <option value="2" default>3-8</option>
             <option value="3">8+</option>
         </fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample:one section with break line -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section>
         <fc-form-field type="text" path="dog.firstName" label="dog first name" placeholder="Enter dog first name.." required></fc-form-field>
         <fc-form-field type="text" path="dog.lastName" label="dog last name" placeholder="Enter dog last name.." required></fc-form-field>
         <fc-form-break-line></fc-form-break-line>
         <fc-form-field type="text" path="owner.firstName" label="owner first name" placeholder="Enter owner fiest name.." required></fc-form-field>
         <fc-form-field type="text" path="owner.lastName" label="owner last name" placeholder="Enter owner last name.." required></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample:two sections with required fields -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="text" path="dog.firstName" label="dog first name" placeholder="Enter dog first name.." required></fc-form-field>
         <fc-form-field type="text" path="dog.lastName" label="dog last name" placeholder="Enter dog last name.." required></fc-form-field>
     </fc-form-section>
     <fc-form-section label="Owner Details">
         <fc-form-field type="text" path="owner.firstName" label="owner first name" placeholder="Enter owner fiest name.." required></fc-form-field>
         <fc-form-field type="text" path="owner.lastName" label="owner last name" placeholder="Enter owner last name.." required></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample:text and numbers and date -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.."></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.."></fc-form-field>
         <fc-form-field type="date" path="dog.birthDate" label="dog birth date"></fc-form-field>
     </fc-form-section>
     <fc-form-section label="Owner Details">
         <fc-form-field type="text" path="owner.name" label="owner name" placeholder="Enter owner name.."></fc-form-field>
         <fc-form-field type="text" path="owner.phone" label="owner phone" placeholder="Enter owner phone.."></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample:text, numbers and validations -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="text" path="dog.name" label="dog name (up to 10 chars)" maxlength="10" placeholder="Enter dog name.."></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age (1-99)" placeholder="Enter dog age.."  min="1" max="99"></fc-form-field>
     </fc-form-section>
     <fc-form-section label="Owner Details">
         <fc-form-field type="text" path="owner.name" label="owner name (at least 5 chars)" minlength="5" placeholder="Enter owner name.."></fc-form-field>
         <fc-form-field type="text" path="owner.phone" label="owner phone (5 to 10 chars)" placeholder="Enter owner phone.." minlength="5" maxlength="10"></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample:text, numbers, tags, dropdowns and required fields -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.." required></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.." required></fc-form-field>
         <fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]' required></fc-form-field>
         <fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
     </fc-form-section>
     <fc-form-section label="Owner Details">
         <fc-form-field type="text" path="owner.name" label="owner name" placeholder="Enter owner name.." required></fc-form-field>
         <fc-form-field type="text" path="owner.phone" label="owner phone" placeholder="Enter owner phone.." required></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample:collapsable with text, numbers, tags, dropdowns and required fields -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details" collapsable>
         <fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.." required></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.." required></fc-form-field>
         <fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]' required></fc-form-field>
         <fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]' required></fc-form-field>
     </fc-form-section>
     <fc-form-section label="Owner Details" collapsable>
         <fc-form-field type="text" path="owner.name" label="owner name" placeholder="Enter owner name.." required></fc-form-field>
         <fc-form-field type="text" path="owner.phone" label="owner phone" placeholder="Enter owner phone.." required></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample: column alignment -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details" align="column">
         <fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.."></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.."></fc-form-field>
         <fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.." required></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.." required></fc-form-field>
         <fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]' required></fc-form-field>
         <fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]' required></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample: with other value -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="tags" allow-other-option path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
         <fc-form-field type="tags" allow-other-option path="dog.breed" label="dog breed">
             <option value="terrier">Terrier</option>
             <option value="labrador">Labrador</option>
             <option value="german shepherd">German Shepherd</option>
         </fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample: pre-defined values -->

<fc-form model='{"dog":{"money": "10", "color": "gray_value", "name":"joey", "age": "5", "breed": "terrier", "food": ["fish", "bones"], "birthDate": "1593810000000"}}'>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="currency" path="dog.money" label="dog money" placeholder="Enter dog name.." required></fc-form-field>
         <fc-form-field type="select" path="dog.color" label="dog color" placeholder="Select color.." required><option value="gray_value">gray color</option><option value="black_value">black color</option></fc-form-field>
         <fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.." required></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.." required></fc-form-field>
         <fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]' required></fc-form-field>
         <fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
         <fc-form-field type="date" path="dog.birthDate" label="dog birth date"></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample: pre-defined other value -->

<fc-form model='{"dog":{"food": ["fish", "steak"]}}'>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="tags" allow-other-option path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample: field with icons -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
          <fc-form-field type="tags"
                        style="--fc-form-tags-padding: 5px 10px;"
                        path="dog.icon"
                        label="dog icon">
                        <option value="next"><fc-icon icon="next"></fc-icon></option>
                        <option value="star"><fc-icon icon="star"></fc-icon></option>
            </fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample: Reset form to pre-defined values -->

<fc-form model='{"dog":{"color": "gray_value", "age": "5", "food": ["fish", "bones"], "birthDate": "1593810000000"}}' id="register-form">
     <label>Register new Dog</label>
        <button onclick="function resetForm() {
          let dogElement = document.getElementById('register-form').reset();
        };resetForm()">Reset Form</button>
     <fc-form-section label="Dog Details">
         <fc-form-field type="select" path="dog.color" label="dog color" placeholder="Select color.." required><option value="gray_value">gray color</option><option value="black_value">black color</option></fc-form-field>
         <fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.." required></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.." required></fc-form-field>
         <fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]' required></fc-form-field>
         <fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
         <fc-form-field type="date" path="dog.birthDate" label="dog birth date"></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample: Field is disabled -->

<fc-form model='{"dog":{"disabledDogFood": ["carrots"], "activeDogFood": ["fish"]}, "dog2":{"disabledDogFood": ["carrots"], "activeDogFood": ["fish"]}}'>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field
          disabled
          path="dog.disabledDogFood"
          type="button-group"
          label="disabled dog food"
          options='["bones", "carrots", "fish"]'>
         </fc-form-field>
         <fc-form-field
          path="dog.activeDogFood"
          type="button-group"
          label="active dog food"
          options='["fish", "carrots"]'></fc-form-field>
     </fc-form-section>
     <fc-form-section label="Dog Details 2">
         <fc-form-field
          disabled
          path="dog2.disabledDogFood"
          type="tags"
          label="disabled dog food"
          options='["bones", "carrots", "fish"]'>
         </fc-form-field>
         <fc-form-field
          path="dog2.activeDogFood"
          type="tags"
          label="active dog food"
          options='["fish", "carrots"]'></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample: pre-defined values and remove field -->

<fc-form model='{"dog":{"name":"joey", "age": "5", "breed": "terrier", "food": ["fish", "bones"]}}'>
     <label>Register new Dog
        <button onclick="function toggleDogName() {
          let dogElement = document.getElementById('dog-name');
          if (dogElement && dogElement.parentElement) {
              dogElement.parentElement.removeChild(dogElement);
          } else {
                function htmlToElement(html) {
                  var template = document.createElement('template');
                  html = html.trim(); // Never return a text node of whitespace as the result
                  template.innerHTML = html;
                  return template.content.firstChild;
              }
              let docSectionElement = document.getElementById('dog-section');
              let newDogNameElement = htmlToElement(`<fc-form-field id='dog-name' type='text' path='dog.name' label='dog name' placeholder='Enter dog name..' required></fc-form-field>`);
              docSectionElement.prepend(newDogNameElement);
          }
        };toggleDogName()">toggle dog name</button>
     </label>
     <fc-form-section id="dog-section" label="Dog Details">
         <fc-form-field id="dog-name" type="text" path="dog.name" label="dog name" placeholder="Enter dog name.." required></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.." required></fc-form-field>
         <fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]' required></fc-form-field>
         <fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
     </fc-form-section>
</fc-form>

Properties

PropertyAttributeTypeDefaultDescription
customRendererscustom-renderersany{}Object with custom render functions to build custom fields.
Key is the "type" property to pass the fc-form-field
Value is a function that return lit-html template.
customValidatorscustom-validatorsany{}Object with custom validations functions
Key is the validator name property to pass the fc-form-field in the "validations" property
Value is a function that return null if the feild is valid, else should return string that is the error enum
dirtydirtybooleanfalseIf the form is dirty
disableddisabledbooleanfalseIf the element is disabled
initSectionCountWeakMap<any, any>
invalidFieldsinvalidFieldsany[]List of invalid fields
missingRequiredFieldsmissingRequiredFieldsany[]List of required fields that are empty
modelmodel{}{}Model of the data
renderErrorMessagerender-error-messageanyObject with function to render the validation error
Key is the errorEnum
Value is a function that will return string of the error message
touchedtouchedbooleanfalseIf the form was touched by the user
validvalidbooleanfalseInternal Observables

Events

Event
change

CSS Custom Properties

PropertyDescription
--fc-form-background-colorform background color. default: "white".
--fc-form-border-radiusform border radius. default: "5px".
--fc-form-border-sizeform border size. default: "1px".
--fc-form-label-font-sizeform's label font size. default: "13px".
--fc-form-label-font-weightform's label font weight. default: "bold".
--fc-form-label-margin-bottomform's label margin bottom. default: "8px".
--fc-form-paddingform inner padding. default: "10px".
--fc-form-section-margin-bottomform's sections margin bottom. default: "10px".
--fc-form-section-margin-leftform's sections margin left. default: "2px".

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free