VierFelderForm

VierFelderForm is a user interface pattern used in software and web design to collect information through four input fields arranged in a two-by-two grid. The name combines the German words vier (four) and Felder (fields) with form, and the pattern is commonly implemented as a compact data-entry unit in forms, dashboards, and configuration screens.

Structure and data fit: The four fields are presented in a square layout, typically with two columns and two rows. Each field has a label, and the layout groups related data to support quick visual association, such as two paired attributes on the same row (left and right) and an additional pair below. Typical examples include a pair of location fields (city and state) and a pair of date fields (day and month), or a price-quantity pair.

Design and accessibility: When implementing VierFelderForm, designers emphasize consistent field widths, clear labels, and logical focus order. The pattern should be responsive: on narrow screens the grid can stack vertically while preserving the pair-wise linkage. Validation can be applied per field, with inline error messages and an optional summary. Proper aria-labels and fieldset grouping improve accessibility.

Uses and implementation notes: The pattern is common in user interface libraries and can be built with CSS grid or flexbox. It is suitable for compact forms where four related values should be entered together, but it may not be ideal for lengthy data-entry tasks or fields with different input types that require varying widths.