Form - Web Component ​

The Form component can be used imported from:

Playground ​

Parameters ​

...

Events ​

This component has events. Check the documentation about how to use the events.

NamePayloadDescription
submitany
restartedvoid

Slots ​

This component has slots. Check the documentation about how to use the slots.

NameTagsDescription
defaultspanContent of the form.

Parameters use ​

config ​

The config attribute is used to set the shape and size of the form.

Creating a template ​

Using the --z-form--template in combination with grid-area per input eases the creation of from layout. This uses the grid-template syntax underneath, which can be checked here.

This value can be overloaded with media queries yo adjust the form layout to the different viewports.

Methods ​

reset() ​

We can all the reset() method of the WebComponent in order to reset the value. This will clean the internal states and emit the nullable value with the change event, plus a restarted event:

In this example, the button triggers the method:

Values:
text:  Lorem ipsum
number:  2.35

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​