Fieldset - CSS Component ​

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

Construction ​

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

z-fieldset ​

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

Legend Content

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>