Input group

The InputGroup component groups form controls and supplementary content into a single Bootstrap input group. It supports text addons, multiple controls, sizing, and all utility props inherited from Prime.

Import

import { Form } from "@promethey/bsui";

Note

InputGroup inherits all utility props supported by the Prime component, including layout, spacing, typography, colors, borders, sizing, positioning, and other Bootstrap utility APIs.

Basic usage

Use InputGroup to combine a Control with supplementary content.

Text addon

Use InputGroup.Text to render text or other content as an input group addon.

InputGroup.Text can contain text, icons, or other React content.

Multiple Controls

An input group can contain multiple controls and addons.

Size

Use the size prop to change the size of the input group and its child controls.

Supported values are:

• sm — small
• lg — large

Small

Large

Button

InputGroup can be combined with other BSUI components such as Button.

Controlled

Control can be used as a controlled input inside an InputGroup.

Utility props

InputGroup inherits all utility props provided by Prime.

InputGroup.Text also supports the utility props provided by Prime.

API

InputGroup

Prop	Type	Default	Description
children	ReactNode	—	Content rendered inside the input group.
size	"sm" | "lg"	null	Controls the size of the input group and its child controls.
className	string | object	null	Additional class names applied to the root element.
style	object	null	Inline styles applied to the root element.

InputGroup also supports all props provided by Prime.

InputGroup.Text

Prop	Type	Default	Description
children	ReactNode	—	Text, icons, or other content rendered inside the addon.
className	string | object	null	Additional class names applied to the addon.
style	object	null	Inline styles applied to the addon.

InputGroup.Text also supports all props provided by Prime and renders a <span> element by default.