InputGroup

<InputGroup>TailwindCSS Modules

A container component that joins leading and trailing addons (dropdowns, buttons, prefixes) to an Input field, sharing a single cohesive border and focus ring.

InstallationColoxo CLI

npx coloxo add input-group --style coloxo-css

ES Module ImportPlayground / npm package

import { InputGroup, InputPrefix } from '@coloxo/ui';

Design Tokens:

--cx-bg-secondary: #F8FAFC--cx-border-primary: #E2E8F0--cx-focus-ring: #2348FF--cx-radius-md: 8px

1. Variant Matrix

InputGroups allow you to seamlessly attach prefixes, suffixes, and interactive addons.

Leading Addon	Trailing Addon	Both Addons
States	Phone number US	Sale amount USD	Exchange Rate EUR USD
Copy Buttons	Website Copy	Addons can be interactive elements like buttons, dropdown selects, or static text.

2. Control heights (Sizes)

The size prop applied to the InputGroup automatically scales the embedded Input and addons.

Sizes Specification Grid

size="sm"

Height: 36px

Phone

Dense forms, inline filters

size="md"DEFAULT

Height: 40px

Phone

Standard forms, settings

size="lg"

Height: 44px

Phone

Hero search, auth screens

3. Interactive Props Configurator

Size

Leading Addon (US)

Trailing Addon (USD)

Invalid / Error State

Disabled Input

Visual Render Canvas

Phone number

This is a hint text to help user.

tsx

1<InputGroup2  label="Phone number"3  leadingAddon={<InputPrefix position="leading">US</InputPrefix>}4  hint="This is a hint text to help user."5>6  <Input type="tel" placeholder="+1 (555) 000-0000" />7</InputGroup>

4. Dark theme

InputGroup backgrounds and addon borders invert colors correctly in dark mode.

Website

Copy

Phone number

This is a hint text to help user.

5. Enterprise layout compositions

InputGroups are widely used in financial forms, URL configurations, and international inputs.

Company Website

https://

Monthly Target

USD

Accessibility

Nested Input Scaling

The inner `<Input />` component intercepts props like `size` and edge flattening from the `InputGroup` parent.

Focus Rings

The group manages a single pseudo-focus ring so the entire complex surface appears selected when the embedded input receives focus.

Props

Name	Type	Default	Description
label	ReactNode	—	Form field label text.
hint	ReactNode	—	Helper text displayed below the group.
error	ReactNode	—	Validation message; renders field in invalid state.
size	"sm" \| "md" \| "lg"	md	Applied to the child Input component.
leadingAddon	ReactNode	—	Joined leading control (e.g. dropdown, icon block).
trailingAddon	ReactNode	—	Joined trailing control (e.g. button, text block).
leadingText	string	—	Inline prefix text passed through to the Input.