input_group: Add InputGroup component. by sxhxliang · Pull Request #1674 · longbridge/gpui-component

sxhxliang · 2025-11-24T11:26:39Z

Introduce InputGroup component with flexible layout and alignment options
Add supporting components: InputGroupAddon, InputGroupText, InputGroupInput, and InputGroupTextarea
Implement various examples including search, URL input, validation, and chat interfaces
Update story module to include and initialize InputGroupStory
Register InputGroup in the main UI module exports

Description

Add a new shadcn/ui InputGroup component that provides a flexible way to compose input fields with addons such as icons, buttons, and text labels.

Features:

InputGroup: Main container with support for disabled/invalid states, horizontal/vertical layouts
InputGroupAddon: Flexible addon container with alignment options (InlineStart, InlineEnd, BlockStart,
BlockEnd)
InputGroupText: Simple text element for labels within addons
InputGroupInput: Styled input wrapper that integrates seamlessly with the group
InputGroupTextarea: Multi-line text input variant for chat-like interfaces

Examples included:

Basic search with icon and results count
URL input with protocol prefix
Username with validation badge
Search with clear button and loading state
Chat input with bottom toolbar

Screenshot

Before	After
Windows/-
macOS/-

Break Changes

Describe any breaking changes introduced by this pull request. If none, remove this section.

Change 1

None

How to Test

Run the story application:
cargo run
Navigate to the InputGroup story panel
Verify the following examples render correctly:
- Basic Search with Icon and Results
- URL Input with Protocol Prefix
- Username with Validation Icon
- Search with Clear Button
- Search with Loading State
- Multiple Icons
- With Action Button
- Disabled State
- Invalid/Error State
- Chat Input with Toolbar

Checklist

I have read the CONTRIBUTING document and followed the guidelines.
Reviewed the changes in this PR and confirmed AI generated code (If any) is accurate.
Passed cargo run for story tests related to the changes.
Tested macOS, Windows platforms performance (if the change is platform-specific)

…dons - Introduce `InputGroup` component with flexible layout and alignment options - Add supporting components: `InputGroupAddon`, `InputGroupText`, `InputGroupInput`, and `InputGroupTextarea` - Implement various examples including search, URL input, validation, and chat interfaces - Update story module to include and initialize InputGroupStory - Register InputGroup in the main UI module exports

huacnlee · 2025-11-24T13:17:31Z

+    /// Create a standard InputGroup with max-width
+    fn example_group() -> InputGroup {
+        InputGroup::new().max_w_96()
+    }


As the example, we should keep the example simple and clean to understand.

Move these things to render method to as a nested layout, even it will duplicate code.

huacnlee · 2025-11-24T13:19:38Z

+const DEFAULT_ADDON_PADDING: Pixels = px(12.);
+const DEFAULT_TEXTAREA_HEIGHT: Pixels = px(80.);
+
+// === Types ===


Remove all comments like this.

huacnlee · 2025-11-24T13:20:02Z

+
+// === Constants ===
+
+const DEFAULT_INPUT_GROUP_ID: &str = "input-group";


Remove this, and use InputGroup as the group id.

huacnlee · 2025-11-24T13:22:51Z

+    /// Marks the input group as invalid/error state.
+    ///
+    /// When `true`, the border color changes to indicate an error.
+    pub fn invalid(mut self, invalid: bool) -> Self {


I think, we are not ready to introduce this feature, because danger not enough. So this API we need to consider more before add.

Please remove it, with replacement, user can be based on style for adding the invalid style.

huacnlee · 2025-11-24T13:23:26Z

+    fn default() -> Self {
+        Self::new()
+    }
+}


Remove default for InputGroup, just use new method.

huacnlee · 2025-11-24T13:24:59Z

+        let border = self.get_border_color(cx);
+
+        div()
+            .id(self.id.unwrap_or_else(|| DEFAULT_INPUT_GROUP_ID.into()))


If the id is not required, just removed it. Here, this code is not correct.

huacnlee · 2025-11-24T13:25:33Z

+        div()
+            .id(self.id.unwrap_or_else(|| DEFAULT_INPUT_GROUP_ID.into()))
+            .w_full()
+            .min_w_0()


Why need this? So, please review you self agian.

huacnlee · 2025-11-24T13:26:33Z

+            .when(cx.theme().shadow, |this| this.shadow_xs())
+            .when(self.disabled, |this| {
+                this.opacity(0.5).cursor_not_allowed()
+            })


Disabled style should not just change the opacity, please follow disabled style of the Input, Button.

huacnlee · 2025-11-24T13:29:08Z

+    pub fn align(mut self, align: InputGroupAlign) -> Self {
+        self.align = align;
+        self
+    }


We also need add helper methods like inline_end, inline_start, block_start and block_end, and please order the method by name.

huacnlee · 2025-11-24T13:30:06Z

+            .text_sm()
+            .font_medium()
+            .cursor_text()
+            .pl(padding.0)


Use p(padding) instead.

huacnlee · 2025-11-24T13:30:56Z

+    /// Creates a text label with default styling.
+    ///
+    /// This is a convenience method for quickly creating text elements.
+    pub fn label(text: impl Into<String>) -> impl IntoElement {


Use Into<SharedShared>

And why have this method? This is not for InputGroupText.

huacnlee · 2025-11-24T13:32:52Z

+/// ```
+#[derive(IntoElement)]
+pub struct InputGroupInput {
+    state: gpui::Entity<crate::input::InputState>,


Clean code, use Entity and InputState.

huacnlee · 2025-11-24T13:33:52Z

+    pub fn height(mut self, height: impl Into<Option<DefiniteLength>>) -> Self {
+        self.height = height.into();
+        self
+    }


Remove this method, use style instead, so user can use h method.

…tly inlined into render() method 2. Remove comments - All // === style comments removed 3. Remove custom group id - DEFAULT_INPUT_GROUP_ID constant and .id() method removed 4. Remove invalid state - invalid field, invalid() method and related logic removed 5. Remove Default trait - Default implementation for InputGroup removed 6. Remove unnecessary id - No longer using fixed id 7. Disabled styling - Changed to use muted background + overlay to fully block interactions 8. Add helper methods - Added align(), block_end(), block_start(), inline_end(), inline_start() in alphabetical order 9. Use IntoSharedString - InputGroupText::label() removed, no longer needed 10. Remove InputGroupText::label - Method removed 11. Use Entity/InputState - Simplified from gpui::Entity<crate::input::InputState> to Entity<InputState> 12. Remove height method - InputGroupTextarea::height() removed, users directly use .h() style method

sxhxliang · 2026-01-18T07:28:39Z

Review Comments Addressed

Thank you for the detailed review! I've addressed all the comments:

✅ Completed (12 items)

Simplified examples - removed all helper functions, inlined directly in render()
Removed section comments (// === Types ===, etc.)
Removed DEFAULT_INPUT_GROUP_ID constant and custom id
Removed invalid state and related API
Removed Default trait implementation
Fixed disabled style - now uses muted background + overlay to block all interactions (mouse, keyboard, scroll)
Added helper methods: align(), block_end(), block_start(), inline_end(), inline_start() in alphabetical order
Removed InputGroupText::label() method
Simplified types: Entity<InputState> instead of full paths
Removed InputGroupTextarea::height() method
Updated all doc examples to reflect API changes
Removed cursor_text() from addon to avoid wrong cursor affordance

⚠️ Two Items Need Discussion

1. Padding methods (line 241-252)
Current implementation uses individual pl/pr/pt/pb because different alignments need different padding values. A single p() method cannot handle tuples. Is this acceptable, or would you prefer a different approach?

2. min_w_0() (line 135)
The linter removed this, but it's needed to prevent flex overflow. Should I restore it with a comment, or handle differently?

All changes have been tested and compilation verified.

huacnlee · 2026-02-06T06:32:28Z

Sorry, I have consider about this PR more time. But I still not sure this is should be accept.

Because the Input is already have prefix, sufixx can support things like InputGroup. The example of InputGroup is pretty like the Input example.

So I just close this, untill when I have new mind.

sxhxliang marked this pull request as ready for review November 24, 2025 13:01

huacnlee changed the title ~~feat(ui): add InputGroup component for composing input fields with ad…~~ input_group: Add InputGroup component. Nov 24, 2025

huacnlee reviewed Nov 24, 2025

View reviewed changes

sxhxliang and others added 3 commits November 28, 2025 22:01

Merge branch 'longbridge:main' into feat/input_group

ec647a5

Merge branch 'main' into input_group

5f47734

fix: typo 'pading' -> 'padding'

6561bb1

huacnlee closed this Feb 6, 2026


		// === Constants ===

		const DEFAULT_INPUT_GROUP_ID: &str = "input-group";

Conversation

sxhxliang commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Features:

Examples included:

Screenshot

Break Changes

How to Test

Checklist

Uh oh!

huacnlee Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sxhxliang commented Jan 18, 2026

Review Comments Addressed

✅ Completed (12 items)

⚠️ Two Items Need Discussion

Uh oh!

huacnlee commented Feb 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sxhxliang commented Nov 24, 2025 •

edited

Loading

huacnlee Nov 24, 2025 •

edited

Loading