Related pages: Input, Checkbox, Button, Select, Calendar, Checkbox Group, Radio Group, File Picker, Textarea, Form
In Tecton 1.55.0, we addressed a long-standing visual issue where form-field components (e.g., <q2-input>, <q2-checkbox>, <q2-select>, <q2-textarea>, <q2-radio-group>, etc.) had different vertical margins by default. Differences like this result in visual inconsistency, which can be undesirable for the user's experience.
Historically, many teams and features have implemented their own spacing between form fields via CSS classes to add consistency. This is not the recommended pattern going forward.
While changing this was simple, it required considerable coordination, as we wanted to minimize the impact on existing features. This page is intended to provide a straightforward guide on how to account for any changes you may notice when you take these changes.
By default, all Tecton form fields now have a 25px vertical margin. In cases where components like <q2-checkbox> are wrapped by a <q2-checkbox-group>, the vertical margin is removed from the <q2-checkbox> and applied strictly to the <q2-checkbox-group>.
If you were previously using CSS classes to customize or override the default vertical margin, these should still work fine. The fix we applied had the lowest possible CSS specificity, which is typically lower than a standard CSS class. As such, we expect few, if any, issues there.
However, continue reading for the recommended approach going forward.
In the future, while not required, we recommend wrapping form fields in a <q2-form> component. Using this, you can customize the spacing between fields using pre-defined options, which include:
0px15px25px35pxIf you were previously adding custom CSS, we strongly recommend switching to this approach when possible. It will keep you in line with approved design patterns with ease.