Form - CSS Component ​

The Form component can be used imported from:

Playground ​

Construction ​

The CSS component uses the <form> tag with the z-form HTML custom attribute.

z-form ​

The z-form parameter is the main parameter used to render the form component and spreads the config to the inputs.

Legend

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.

Code

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

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​