Add new InputGroup compound component with Addon, Suffix, and Button support

[pedromenezes1]

New InputGroup compound component for building inputs with icons, addons, inline suffixes, and action buttons.

Includes comprehensive documentation page with demos and unit tests.

Features

• Field Integration — InputGroup accepts label, description, error, required, and labelTooltip props directly; automatically wraps in Field when label is provided
• Addons — Place icons or text before/after the input using align="start" or align="end"
• Compact Button — Small button inside an Addon for secondary actions (copy, clear, toggle visibility)
• Action Button — Full-height flush button as a direct child for primary actions (submit, search)
• Inline Suffix — Text that flows seamlessly next to the typed value (e.g., .workers.dev); input width adjusts automatically as user types
• Size Variants — xs, sm, base, lg sizes cascade to all children via context
• Error State — Error flows through context; InputGroup.Input auto-sets aria-invalid="true" when error is present
• Disabled State — disabled prop disables all interactive children

Sub-components

Component	Description
InputGroup	Root container; provides context and accepts Field props
InputGroup.Input	Styled input; inherits size, disabled, error from context
InputGroup.Addon	Container for icons, text, or compact buttons; align="start" (default) or align="end"
InputGroup.Button	Full-height button (direct child) or compact button (inside Addon)
InputGroup.Suffix	Inline text suffix with automatic width measurement

Usage Examples

// With Field props (label, description, error, tooltip)
<InputGroup
  label="Email"
  description="We'll never share your email"
  error={{ message: "Invalid email", match: "typeMismatch" }}
  labelTooltip="Used for account recovery"
>
  <InputGroup.Input type="email" />
  <InputGroup.Addon align="end">@example.com</InputGroup.Addon>
</InputGroup>

// Inline suffix with auto-measuring width
<InputGroup>
  <InputGroup.Input placeholder="my-worker" />
  <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>
</InputGroup>

// Search with icon addon and action button
<InputGroup>
  <InputGroup.Addon><MagnifyingGlassIcon /></InputGroup.Addon>
  <InputGroup.Input placeholder="Search..." />
  <InputGroup.Button variant="primary">Search</InputGroup.Button>
</InputGroup>

// Password with compact toggle button inside addon
<InputGroup label="Password">
  <InputGroup.Input type={show ? "text" : "password"} />
  <InputGroup.Addon align="end">
    <InputGroup.Button variant="ghost" size="sm" onClick={toggle}>
      {show ? <EyeSlashIcon /> : <EyeIcon />}
    </InputGroup.Button>
  </InputGroup.Addon>
</InputGroup>

Caveats

• InputGroup.Input omits label, description, error, size, and labelTooltip props — these are handled by the parent InputGroup
• When using InputGroup.Suffix, the input width is measured dynamically via a hidden ghost element
• InputGroup.Button renders differently based on placement: full-height flush when direct child, compact when inside Addon

Screenshots

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@249

commit: d8a5c08

[github-actions]

Docs Preview

View docs preview

Commit: d8a5c08

[github-actions]

Visual Regression Report

23 screenshot(s) with visual changes:

Button / Variants

1 px (0%) changed

Before	After	Diff

Button / Sizes

52,939 px (1.81%) changed

Before	After	Diff

Button / With Icon

40,226 px (1.38%) changed

Before	After	Diff

Button / Icon Only

4 px (0%) changed

Before	After	Diff

Button / Loading State

58,790 px (2.01%) changed

Before	After	Diff

Button / Disabled State

64,597 px (2.21%) changed

Before	After	Diff

Dialog / Basic Dialog

127,440 px (2.3%) changed

Before	After	Diff

Dialog / Alert Dialog (role=“alertdialog”)

125,071 px (2.26%) changed

Before	After	Diff

Dialog / Confirmation Dialog (with disablePointerDismissal)

20,300 px (0.37%) changed

Before	After	Diff

Dialog / With Actions

146,027 px (2.64%) changed

Before	After	Diff

Dialog / With Select

136,436 px (2.46%) changed

Before	After	Diff

Dialog / With Combobox

137,423 px (2.48%) changed

Before	After	Diff

Dialog / With Dropdown

4,137 px (0.07%) changed

Before	After	Diff

Select / Without Visible Label

9,532 px (1.69%) changed

Before	After	Diff

Select / With Description and Error

13,041 px (1.86%) changed

Before	After	Diff

Select / Placeholder

1,428 px (0.22%) changed

Before	After	Diff

Select / Label with Tooltip

12,894 px (1.83%) changed

Before	After	Diff

Select / Loading

12,828 px (1.81%) changed

Before	After	Diff

Select / Multiple Item

19,371 px (2.3%) changed

Before	After	Diff

Select / More Example

23,445 px (2.57%) changed

Before	After	Diff

Select / Select

705 px (0.08%) changed

Before	After	Diff

Select / Select.Option

23,306 px (2.72%) changed

Before	After	Diff

Select (Open)

0 px (0%) changed

Before	After	Diff

3 screenshot(s) unchanged

• Dialog (Open)
• Select / Basic Usage
• Select / Custom Rendering

---

Generated by Kumo Visual Regression