ADR-012: Input & Control Sizing

Field	Value
Type	Skill Resource
Source	~/.copilot/skills/adr/references/adr-012-input-control-sizing.md
Description	Not specified

Source Content

ADR-012: Input & Control Sizing

Decision

All controls sharing a horizontal input-group row share one visual height, set by the tallest peer. Control sizing flows from the design-token size scale, never from ad hoc heights.

Key rules

• All controls in a horizontal input group share the same visual height; the tallest peer sets the group height and shorter controls stretch to match.
• Do not mix control sizes (for example size="sm" and size="md") in the same input-group row.
• The shared-height rule covers any controls placed side by side: text fields, select dropdowns, button groups, and date pickers.
• Use the design-system InputGroup component to enforce the shared-height constraint automatically.
• Control heights come from the design-token size scale, not hardcoded pixel values.

Why

Mixing control sizes produces ragged, misaligned rows. A single shared height, driven by the token size scale, keeps input groups visually aligned and consistent with the system’s token-based sizing.

Applies when

You are laying out a form row or toolbar that contains more than one control side by side.

Related

• ADR-010 — component architecture and catalog.
• ADR-009 — icon role, placement, and layout grid.