Composition Gallery

Dense form

A 42-control stress test for compact spacing, labels, focus order, and responsive readability.

Overview

Intentionally pushes Core field rhythm before a real enterprise workflow is built.

Live Preview

Compact controls

Control 1

Control 2

Control 3

Control 4

Control 5

Control 6

Control 7

Control 8

Control 9

Control 10

Control 11

Control 12

Control 13

Control 14

Control 15

Control 16

Control 17

Control 18

Control 19

Control 20

Control 21

Control 22

Control 23

Control 24

Control 25

Control 26

Control 27

Control 28

Control 29

Control 30

Control 31

Control 32

Control 33

Control 34

Control 35

Control 36

Control 37

Control 38

Control 39

Control 40

Control 41

Control 42

42 controls · compact density stress test

Code

1{Array.from({ length: 42 }, (_, index) => <Field label={`Control ${index + 1}`}><Input /></Field>)}

Components Used

FieldInputButton

Accessibility

Every control has a visible programmatic label and follows source-order tab navigation through the full form.

Responsive Behaviour

The compact grid progressively reduces columns to keep controls readable and preserve touch targets.

Notes

This validates density tokens, not a reusable enterprise form framework. Conditional logic and advanced validation flows would be product or Pro work.