Skip to content

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

Open
pedromenezes1 wants to merge 1 commit intocloudflare:mainfrom
pedromenezes1:feat/input-group-addon
Open

Add new InputGroup compound component with Addon, Suffix, and Button support#249
pedromenezes1 wants to merge 1 commit intocloudflare:mainfrom
pedromenezes1:feat/input-group-addon

Conversation

@pedromenezes1
Copy link
Contributor

@pedromenezes1 pedromenezes1 commented Mar 18, 2026

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

Includes documentation page with demos and unit tests.

Features

  • Addons — Place icons or text before or after the input using align="start" or align="end"
  • Compact Button — Small button inside an Addon for secondary actions (copy, clear, etc.)
  • 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)
  • Size variants — xs, sm, base, lg sizes that apply to the entire group

All features can be combined together.

Sub-components

Component Description
InputGroup.Input Styled input that inherits size from group
InputGroup.Addon Container for icons, text, or compact buttons
InputGroup.Button Full-height button (direct child) or compact button (inside Addon)
InputGroup.Suffix Inline text that flows with the typed value
Screenshot 2026-03-18 at 01 55 47 Screenshot 2026-03-18 at 01 55 52 Screenshot 2026-03-18 at 01 55 55
Screenshot 2026-03-18 at 01 55 58 Screenshot 2026-03-18 at 01 56 01 Screenshot 2026-03-18 at 01 56 04
Screenshot 2026-03-18 at 01 56 06

@pedromenezes1 pedromenezes1 force-pushed the feat/input-group-addon branch from b348d28 to 86e9d5d Compare March 18, 2026 01:38
@pedromenezes1 pedromenezes1 changed the title fix(InputGroup): flush button properly covers container ring border feat(InputGroup): revamp component with new compound API Mar 18, 2026
@pedromenezes1 pedromenezes1 changed the title feat(InputGroup): revamp component with new compound API feat: new InputGroup compound component with Addon, Suffix, and Button support Mar 18, 2026
@pedromenezes1 pedromenezes1 changed the title feat: new InputGroup compound component with Addon, Suffix, and Button support Add new InputGroup compound component with Addon, Suffix, and Button support Mar 18, 2026
@pedromenezes1 pedromenezes1 force-pushed the feat/input-group-addon branch 5 times, most recently from 092bd90 to 9098d74 Compare March 18, 2026 02:00
Add compound component pattern with InputGroup.Input, InputGroup.Addon,
InputGroup.Button, and InputGroup.Suffix sub-components.

Features:
- Addon supports align='start' or align='end' for positioning
- Button can be placed inside Addon (compact) or as direct child (full-height flush)
- Suffix renders text that flows seamlessly next to typed value
- Size variants (xs, sm, base, lg) cascade to all children
- Flush button extends beyond container to cover ring on focus

Includes documentation page with demos and behavior-focused unit tests.
@pedromenezes1 pedromenezes1 force-pushed the feat/input-group-addon branch from 9098d74 to 91cc513 Compare March 18, 2026 02:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant