Skip to main content

Forms layout

Effective form layouts play a crucial role in usability. Well-structured forms include fieldsets, considering the hierarchy of information, and understanding how to strike the right balance between aesthetics and functionality.

Forms layout - Code

Using custom layout​

To align form-ready components in a complex form layout, you typically omit the label attribute and define the label as an ix-field-label component.

You can follow the example here:

  1. Define the ix-input component including an id attribute.
<ix-input id="mytest"></ix-input>
  1. Define an ix-field-label component with a for attribute to link the label to the ix-input component.
<ix-field-label htmlFor="mytest">Test</ix-field-label>
  1. Define an ix-helper-text component with a for attribute to link the helper text to the ix-input component.
<ix-helper-text
  htmlFor="mytest"
  helperText="Helper text"
  invalidText="Error text"
  validText="Valid text"
  warningText="Warning text"
  infoText="Info text"
></ix-helper-text>

Using ix-layout-auto​

Using ix-layout-grid​