JD json-to-dom Form Styles
🎨 Pure Layout Styles • No JS / Events • Single Input Per Row

Form Label & Input Alignment Styles

Compare different label and input alignment patterns in declarative JSON. Concentrated exclusively on label/input positioning without events or complex multi-column grids.

Style 01 Vertical Stack

Label Above, Input Below (Vertical)

The standard mobile-first layout. Labels are stacked directly over the input fields with standard vertical margins for maximum clarity and scannability.

Preview Pattern:
Stock Item Name
e.g. Shading Net Kgs
Tag hierarchy: div > label + input →
Style 02 Horizontal Flex

Label Left (Left-Aligned), Input Right

Label sits on the left with a fixed width, text aligned left. The input occupies the remaining horizontal row space.

Preview Pattern:
Voucher No
1042
Flex row: w-32 text-left + flex-1 →
Style 03 Enterprise Accounting

Label Left (Right-Aligned), Input Right

Classic desktop ERP/accounting layout. Labels are aligned to the right close to the input border with a trailing colon, creating a clean central gutter.

Preview Pattern:
Batch Name :
Tuf-Rs.170
Flex row: w-36 text-right pr-3 →
Style 04 Joined Addon Box

Label as Joined Addon Box

Label is formatted as a shaded prefix box physically attached to the input field, forming a single compact visual unit.

Preview Pattern:
Godown Main Location
Addon group: rounded-l-lg + rounded-r-lg →
Full Form Controls & Submit

Full Form Controls & Submission (Select, Checkbox, Textarea)

Complete form with multiple input types (text, dropdown select, checkboxes) and form submission state capture.

Multi-control form handling →