InputGroup: input prefixes and suffixes

Build input groups with InputGroup. This page includes a runnable example, all props, and behavior constraints.

Complete example

Complete environment setup first. Copy this complete main.go and run go run ..

package main

import (
	"github.com/dxui-org/dxui"
	"log"
)

func main() {
	value := ""
	app := dxui.NewApp(dxui.AppOptions{
		Title:      "InputGroup",
		Width:      640,
		Height:     480,
		Background: dxui.RGBA(248, 250, 252, 255),
	})
	if err := app.Run(func() dxui.View {
		return dxui.Box(
			dxui.BoxProps{
				Gap: 16,
				Style: dxui.Style{
					Padding: dxui.Padding(24),
				},
			},
			dxui.InputGroup(
				dxui.InputGroupProps{
					Style: dxui.Style{
						Width: dxui.Px(360),
					},
				},
				dxui.InputGroupContent{
					Input: dxui.Input(dxui.InputProps{
						Key:      "query",
						Value:    value,
						OnChange: dxui.Assign(&value),
					}),
					Prefix: dxui.Some(dxui.Label("Search")),
					Suffix: dxui.Some(dxui.TextButton(
						dxui.ButtonProps{
							OnPress: func() {
								value = ""
							},
						},
						"Clear",
					)),
				},
			),
		)
	}); err != nil {

		log.Fatal(err)
	}
}

Parameters and API

func InputGroup(props InputGroupProps, content InputGroupContent) View

Field	Type	Purpose, defaults, and constraints
Key	string	Stable unique identity within one parent; empty by default. Use business IDs in dynamic lists, not changing indices.
Style	Style	Local layout, paint, and text styling; zero uses intrinsic sizes and theme defaults.
Token	ComponentToken	Component theme entry; empty selects its default.
States	StateStyles	Paint patches for actual interaction states; cannot fabricate state or change layout.
Pointer	PointerBehavior	Defaults to PointerAuto; PointerNone excludes the entire subtree from pointer participation, unlike Disabled.

Behavior and limitations

InputGroupContent.Input must be exactly one Input. Supply Prefix/Suffix explicitly with Some; they may contain noninteractive content or Button, but no other focusable controls or nested editors. The group paints the shared background, border, corners, and focus-within appearance; Input takes the remaining width. Editor state and Key are retained. A suffix button is a separate Tab stop.

All components share identity, style, and pointer rules. See full declarations for referenced enums, structs, and comments. Running examples explains build verification.