Form - CSS Component ​

Browser support ​

Construction ​

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

z-form ​

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

LegendContent

Playground ​

Customization ​

HTML Examples ​

Imports
html
<script type="module" src="/0.3.7/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/Form.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/Fieldset.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/TextInput.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/NumberInput.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/PasswordInput.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/DateInput.css" />
<link rel="stylesheet" href="/0.3.7/@zurich/css-components/TimeInput.css" />
Code
html
<h3>Form</h3>

<form z-form>
  <fieldset z-fieldset>
    <legend>Personal info</legend>
    <div z-flex="50">
      <label z-text-input>
        <span>First name</span>
        <small>Required input</small>
        <input type="text" placeholder="Your first name" required />
      </label>
      <label z-text-input>
        <span>Last name</span>
        <input type="text" placeholder="Your last name" />
      </label>
    </div>
    <label z-number-input>
      <span>Postal code</span>
      <input type="number" placeholder="000000" />
    </label>
    <label z-date-input>
      <span>Birthday</span>
      <input type="date" />
    </label>
  </fieldset>

  <fieldset z-fieldset>
    <legend>Security</legend>
    <div z-flex="50">
      <label z-password-input>
        <span>Password</span>
        <input type="password" required value="xxxx" />
      </label>
      <label z-password-input>
        <span>Repeat password</span>
        <small>Passwords don't match</small>
        <input type="password" required value="xxxx" data-invalid />
      </label>
    </div>
  </fieldset>
</form>