Input Group

The InputGroup component combines addons, prefixes, suffixes, and a form control into one framed input row.

Usage & Examples

BudgetOptional

USD

amount-field.tsx

<InputGroup label="Budget" prefix="$" suffix="USD">
  <TextInput placeholder="2500" aria-label="Budget amount" />
</InputGroup>

Input Group props API
				Default	Description
`children`	`ReactNode`	No	props	`—`	Main form control rendered inside the group.
`className`	`string`	No	styling	`—`	Additional class name for the component root.
`containerClassName`	`string`	No	props	`—`	Additional class name for the outer label/component container.
`contentClassName`	`string`	No	props	`—`	Additional class name for the content/control area.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`description`	`ReactNode`	No	props	`—`	Supporting description rendered before the control and connected with aria-describedby.
`descriptionClassName`	`string`	No	props	`—`	Additional class name for the description text.
`disabled`	`boolean`	No	props	`false`	Whether the grouped control is disabled.
`endAddon`	`ReactNode`	No	props	`—`	Addon content rendered after the shared input frame.
`endAddonClassName`	`string`	No	props	`—`	Additional class name for the end addon.
`error`	`ReactNode`	No	props	`—`	Error message rendered after the control and announced to assistive technologies.
`errorClassName`	`string`	No	props	`—`	Additional class name for error text.