Form ​

...

Browser support ​

...

Parameters ​

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

The parametrization of the component can be done with the following custom HTML params:

NameTypeDescription
z-formstring

The main parameter has two components following the pattern: <shape><?:size>.

  • shape: Establishes the styling of the input. Default value is line . Possible values are: shaped or line. ,
  • size: (optional) defines de size of the input. The default value is m, being omitted from the param. The possible values are: m or l.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<script type="module" src="/0.3.6/@zurich/css-components/javascript.js"></script>
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Form.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Fieldset.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/TextInput.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/NumberInput.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/PasswordInput.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/DateInput.css" />
<link rel="stylesheet" href="/0.3.6/@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>