Input group - CSS Component ​

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Construction ​

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

z-input-group ​

The z-input-group parameter is the main parameter used to render the input-group component.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Fieldset.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/TextInput.css" />
Code
html
<fieldset z-fieldset>
  <legend>User name:</legend>
  <label z-text-input>
    <span>User name</span>
    <input type="text" placeholder="User name" />
  </label>
</fieldset>