Missing axis
InputGroup can only express inside addons — a prefix/suffix floating inside the field shell (shadcn, Geist, Linear, Polaris style). The other half of the ecosystem attaches addons as boxed cells: a filled cell fused to the field's edge, divided from the input by a hairline — Bootstrap's input-group, Ant's addonBefore/addonAfter, classic URL/unit/currency fields.
By the north-star test (recreate almost any design system), a Bootstrap- or Ant-looking system currently cannot be expressed: there is no addon-attachment axis.
Sketch
- An addon layout axis on the input item (e.g.
inside (default) | boxed), runtime-switchable like other axes (CSS vars / data attributes on InputGroup/InputGroupAddon).
- Boxed cell: neutral fill, shares the group's outer border/radius, hairline divider toward the input (the divider itself may be worth an option — most classic systems always draw it).
- Needs a story for non-box field styles (line / filled-line): boxed cells on an underline-only field are unusual; likely constrain or degrade gracefully.
Context
Explored in the panel-lab Inputs section (www/src/modules/panel-lab/sections/inputs.tsx, branch panel-lab-clean-up): an Addons block with Layout (Inside/Boxed) + conditional Divider row demos both families on a live specimen. The panel exploration is a prototype; this issue tracks the registry-side axis.
Missing axis
InputGroupcan only express inside addons — a prefix/suffix floating inside the field shell (shadcn, Geist, Linear, Polaris style). The other half of the ecosystem attaches addons as boxed cells: a filled cell fused to the field's edge, divided from the input by a hairline — Bootstrap'sinput-group, Ant'saddonBefore/addonAfter, classic URL/unit/currency fields.By the north-star test (recreate almost any design system), a Bootstrap- or Ant-looking system currently cannot be expressed: there is no addon-attachment axis.
Sketch
inside(default) |boxed), runtime-switchable like other axes (CSS vars / data attributes onInputGroup/InputGroupAddon).Context
Explored in the panel-lab Inputs section (
www/src/modules/panel-lab/sections/inputs.tsx, branchpanel-lab-clean-up): an Addons block with Layout (Inside/Boxed) + conditional Divider row demos both families on a live specimen. The panel exploration is a prototype; this issue tracks the registry-side axis.