Skip to main content

glint-form

Provides form layout in combination with <glint-form-section>.

Each sections can define how many fields to show side-by-side with the cols attribute. This value is a maximum. The actual number of columns can be lower than this if there is not enough space to fit all the fields. This is reevaluated on resize so that the form remains legible when making the form panel smaller.

<glint-form>
  <glint-form-section label="DataElement" cols="2"
                      description="Some description">
    <!-- ... -->
  </glint-form-section>
  <glint-form-section label="Options" [hidden]="showOptions()">
    <!-- ... -->
  </glint-form-section>
  <div actions>
    <button>Save</button>
  </div>
</glint-form>
  • <glint-form>
    • [actions]: Content with the actions attribute will be placed at the end of the form and can be used to add a submit button. This part will be omitted in readonly mode.
  • <glint-form-section>
    • [label]: (optional) Section title.
    • [description]: (optional) A longer description appearing below the label.
    • [cols]: ('1', '2', '3' or '4', default = '1') Creates a responsive layout with n columns. If the form becomes too small to show the columns side by side, the component falls back to a smaller number of columns.
    • [hidden]: (default = false) Can be used to hide the section under certain conditions.