Inputs ​

Forms guidelines

Make sure to have a look to the Forms' guidelines in ZeroHeight before starting to work with forms. These have been created to help you to understand the best practices and the guidelines to follow when working with forms.

Inputs components have the following characteristics:

  • They are form elements that the user can use to introduce data or communicate and input.
  • They are model-based components, that normally required to be controlled via closed-loop state management.
  • They all must be inside a <form> tag or, even better, a Form component.
  • They must be wrapped semantically using the <fieldset> tag with the corresponding <legend> label tag or, even better, a Fieldset component.
  • They are available as part of all libraries.
  • They might include atom components.
  • In the case of the @zurich/css-components versions, they are always wrapped by a <label /> tag when they are and input or output.

How to select the right input ​

When selecting the right input, you should consider the following:

  • Type of data: The type of data that the user will introduce.
  • Validation: The validation rules that the input must follow.
  • Accessibility: The accessibility requirements of the input.
  • Design: The design requirements of the input.
  • User experience: The user experience requirements of the input.

Inputs by model type ​

Boolean ​

Closed options ​

Limited options ​

Multiple limited inputs ​

Open options ​

Multiple open inputs ​

List of inputs ​