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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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