Use Cases Forms
Natively Gameface does not support HTML <form> element. However, making forms is possible by using either forms-polyfill or the form control component from the Gameface custom components suite.
Form control component
Section titled “Form control component”This is a component that is part of the Gameface custom components suite and makes it possible to create working forms inside Gameface.
More about the form control component you can check here.
Forms polyfill
Section titled “Forms polyfill”Using the forms polyfill will make it possible to define forms with the HTML <form> element. When the polyfill is initialized it will iterate over the whole DOM tree and replace all the <form> tags with the form control component enabling you to directly run a page that contains <form> elements without replacing them with the Gameface component.
Note: If <form> has a <form> element inside then the inner form won’t be replaced because nested forms are forbidden by standard.
Polyfill location
Section titled “Polyfill location”The polyfill is located inside the Samples/uiresources/Forms/dist.
Usage with UMD modules
Section titled “Usage with UMD modules”Import the forms polyfill directly in an HTML page at the end of the <body>:
<script src="./dist/forms-polyfill.development.js"></script>If you wish to import the polyfill using JavaScript you can replace the script tags with import statements like this:
import './dist/forms-polyfill.production.min.js';Note: You will need an appropriate module bundler if you are importing ES modules. Another way is adding your script to the HTML with the type="module" attribute - <script src="myscript.js" type="module"></script>.
Usage with CJS modules
Section titled “Usage with CJS modules”Import the forms polyfill:
require('./dist/forms-polyfill.production.min.js');The CommonJS(CJS) modules are used in a NodeJS environment, be sure to use a module bundler to use them.
Polyfill styles
Section titled “Polyfill styles”There are default styles that are optional for the polyfill. We advise you to import them as well. They are located inside Samples/uiresources/Forms/dist/forms-polyfill-styles.css.
You can directly add them to the <head> of your HTML page:
<link rel="stylesheet" href="./dist/forms-polyfill-styles.css">What elements are supported inside the <form> element when polyfill is used?
Section titled “What elements are supported inside the <form> element when polyfill is used?”All the elements that the form control component supports are supported inside the <form> element.
This is the list with the currently supported elements by the form control component.
Note: For best results, we are advising you to use the Gameface components suite when you are making forms inside Gameface.
Sample
Section titled “Sample”You can play around with a sample demonstrating how the forms polyfill can be used. The sample is located inside Samples/uiresources/Forms/demo. Follow the instructions in the README.md document.
© 2026 Coherent Labs. All rights reserved.