Form - Web Component

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

Parameters

The Web component uses the <z-form> tag:

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description	Slot
config	string	The main parameter has two components following the pattern: <shape><?:size>. shape: Establishes the styling of the input. Default value is line . Possible values are: shaped or line. , size: (optional) defines de size of the input. The default value is m, being omitted from the param. The possible values are: m or l.

The available slots for the component are:

Name	Tags	Description
default	span

config

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

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.5.3/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.3/@zurich/web-components/form.js"></script>
<script type="module" src="/0.5.3/@zurich/web-components/text-input.js"></script>

Code

<z-form>
  <z-text-input label="User name" placeholder="User name" value=""></z-text-input>
</z-form>