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

Login

Playground

Customization

HTML Examples

Imports

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

Code

<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>