Form

Updated:

Use for wrapping form fields with consistent spacing.

Properties

Learn more about properties.

spacing

Changes the vertical spacing of the form-fields contained within the component's slot

Development

Easily Remove Vertical Spacing

If you're trying to implement a layout that does not benefit from any form field spacing, removing it is quite easy! All you have to do is wrap your form fields in a component, setting the spacing to "none" like so:

<q2-form spacing="none">
  <q2-input label="First name"></q2-input>
  <q2-input label="Last name"></q2-input>
</q2-form>

Patterns

Provide clean examples of how to compose multiple components together in order to achieve a specific visual outcome that is curated and maintained by Tecton.

Full-page patterns

  • Account Settings Page

    How to build an Account Settings page in Tecton: six independent settings sections covering nickname, notifications, statement delivery, card management, spending limits, and overdraft protection.

  • Funds Transfer Page

    How to build a Funds Transfer form in Tecton: a single-column transfer with rich account options, a recurrence schedule, and client-side validation.

  • Message Center Page

    How to build a Message Center page in Tecton: a two-panel layout with a message list on the left and a selected message detail plus response form on the right.

  • Profile Page

    How to build a Profile page in Tecton: required-field validation for personal information, real-time cross-field password validation, and plain integration toggles.

CSS Variables

The following CSS variables are available to override the default theme styles of the q2-form component.

Changelog

The changelog provides a detailed history of new features, improvements, and bug fixes going back to Tecton 1.30.0. If the button is disabled, it indicates there have been no detectable changes since then.

Show changelog (7)