Input Group

Overview

The InputGroup component combines input fields with addons like icons, text, and buttons. It provides a cohesive visual design for complex input controls while maintaining focus states and accessibility across all elements.

Import

import { InputGroup } from "@px-ui/core";

Usage

<InputGroup.Root>
  <InputGroup.Addon>
    <SearchIcon />
  </InputGroup.Addon>
  <InputGroup.Input placeholder="Search..." />
</InputGroup.Root>

Examples

With Button

Add action buttons directly within the input group for quick access to related functionality.

<InputGroup.Root>
  <InputGroup.Input placeholder="Enter your email" />
  <InputGroup.Addon align="inline-end">
    <InputGroup.Button>Subscribe</InputGroup.Button>
  </InputGroup.Addon>
</InputGroup.Root>

With Text

Use text addons to provide context like prefixes, suffixes, or units.

<InputGroup.Root>
  <InputGroup.Addon>
    <InputGroup.Text>https://</InputGroup.Text>
  </InputGroup.Addon>
  <InputGroup.Input placeholder="example.com" />
</InputGroup.Root>

<InputGroup.Root>
  <InputGroup.Input placeholder="Enter amount" type="number" />
  <InputGroup.Addon align="inline-end">
    <InputGroup.Text>USD</InputGroup.Text>
  </InputGroup.Addon>
</InputGroup.Root>

Sizes

Input groups support multiple sizes to match different design contexts.

<InputGroup.Root size="sm">
  <InputGroup.Addon>
    <SearchIcon />
  </InputGroup.Addon>
  <InputGroup.Input placeholder="Small input group" />
</InputGroup.Root>

<InputGroup.Root size="default">
  <InputGroup.Addon>
    <SearchIcon />
  </InputGroup.Addon>
  <InputGroup.Input placeholder="Default input group" />
</InputGroup.Root>

Anatomy

Components that make up InputGroup:

InputGroup.Root

The root container that holds all input group components and manages their layout.

Custom Props:

Inherited Props: Standard HTML div props

InputGroup.Input

The input field within the group.

Custom Props:

Inherited Props: Standard HTML input props

InputGroup.Addon

Container for icons, text, or buttons displayed alongside the input.

Custom Props:

Inherited Props: Standard HTML div props

InputGroup.Button

Button component styled to work within an input group.

Custom Props:

Inherited Props: All Button component props except size

InputGroup.Text

Text element for displaying static content like prefixes, suffixes, or units.

Custom Props:

Inherited Props: Standard HTML span props

API Reference

See the Anatomy section above for detailed component props.