Displaying controls in a vertical layout enhances readability, especially on mobile devices, by aligning with natural scrolling. It organizes related controls intuitively and adapts well to various screen sizes, ensuring a consistent user experience.
form classes
Using form CSS classes for spacing and alignment streamlines the styling process by providing a consistent and reusable set of styles. This approach ensures uniformity across the application, reduces the need for repetitive code, and simplifies maintenance. It also enhances readability and efficiency, making it easier for developers to apply and adjust styles quickly. Overall, form CSS classes improve the user experience by delivering a more polished and cohesive interface.
Adding labels to controls improves accessibility and usability by clearly indicating the purpose of each control. Displaying the label in a block direction, is great for clarity and readability, especially in forms with limited horizontal space, like on mobile devices. It makes it easy for users to associate labels with their respective controls.
Adding labels to controls improves accessibility and usability
by clearly indicating the purpose of each control. Displaying
the label in an inline direction, is more compact and
efficient, allowing for quick scanning and understanding of
the form. It works well when you have enough horizontal space
and want to maintain a streamlined appearance.
A grid layout with aligned labels and controls ensures
consistency and readability, making it easier to scan and
understand the form. Each label and control having the same
width provides a clean, organized appearance, enhancing the
overall user experience.
A custom grid layout allows for flexible arrangement of form
controls, such as placing two controls in the first row and a
full-width control in the second row. For custom grids you
should always apply the
.field-group class on the
container, as this class defines the spacing between columns
and rows. Then, for defining your custom layout, we suggest
using grid-template such as in the next example.
By default field group does not provide any padding. To apply
padding to the field group you will have to include
any of the global body padding classes
to the .field-group element. In this example the
dashed line all around is not part of the tree design. It has
been added to allow you to see the presence of padding.