Use for wrapping form fields with consistent spacing.
spacingChanges the vertical spacing of the form-fields contained within the component's slot
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
<q2-form spacing="none">
<q2-input label="First name"></q2-input>
<q2-input label="Last name"></q2-input>
</q2-form>
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.
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.
Containers that use borders, drop shadows, or background colors to indicate grouping are commonly referred to as cards. This document provides examples of how to create various card style layouts using the surface component.
End-to-end examples of common banking forms — account registration, card controls, secure message, and check deposit — built with Tecton components and the layout rules from Designing Forms.
How to build a Funds Transfer form in Tecton: a single-column transfer with rich account options, a recurrence schedule, and client-side validation.
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.
How to build a Profile page in Tecton: required-field validation for personal information, real-time cross-field password validation, and plain integration toggles.
The following CSS variables are available to override the default theme styles of the q2-form component.
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.