Input group - Web Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
Parameters
The Web component uses the <z-input-group>
tag:
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|
The available slots for the component are:
Name | Tags | Description |
---|---|---|
default | span |
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.0/@zurich/web-components/input-group.js"></script>
<script type="module" src="/0.5.0/@zurich/web-components/text-input.js"></script>
<script type="module" src="/0.5.0/@zurich/web-components/button.js"></script>
Code
html
<z-input-group>
<z-text-input config="shaped" label="Name"></z-text-input>
<z-text-input config="shaped" label="Email" input-type="email"></z-text-input>
<z-button>Submit</z-button>
</z-input-group>