Skip to content

Registry: InputGroup lacks a boxed/attached addon style #618

Description

@mehdibha

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions