Form

Submit

Implementations

The component Form is available in the following technologies:

CSS Components

Web Components

Make sure you have read about the parameters in here.

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

Name	Type	Description
`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`.
`custom`	`object`	A record of key-value pairs to set the CSS custom tokens. It's a complex attribute set as an JS object in stringified JSON format. Example: html `<z-form custom='{"fill":"#06e7a3"}' />` Check the available values in the customization section.
`custom-str`	`string`	The stringified version of the `custom` property. It follows the pattern `key:value;key:value;`, with the possibility of setting multiple values and spaces between the punctuation characters. Example: html `<z-form custom-str="fill:#06e7a3" />`
`z-theme`	`string`	Sets the theme of the component. The possible values are `light` and `dark`. html `<z-form z-theme="dark" />`

...

INFO

Check everything about the customization mechanics in the "How it works" documentation.

CSS Variable	Type	Description
`--z-form--margin`	`distance`	Margin of the form.
`--z-form--gap`	`distance`	Gap between form elements.

The margin and gap between form elements can be customized using the --z-form--margin and --z-form--gap tokens.

Submit

...