Label as Joined Addon Box (Prefix Group)
Compact prefix group layout with one input per row. The label is styled as a shaded addon block physically connected to the input.
Rendered Form (Joined Addon Box)
labelAddonSpec.json
CSS Architecture for Addon Box
The container uses flex rounded-lg shadow-sm border border-slate-300 overflow-hidden. The <span> or <label> serves as the prefix addon using px-3.5 py-2 bg-slate-100 text-slate-600 border-r border-slate-300 font-semibold w-32 shrink-0, and the <input> uses flex-1 px-3 py-2 border-0 focus:ring-0 focus:outline-none.