InputGroup

A container component that groups input elements with buttons or text addons in a seamless layout.

Search Input with Button

Text input grouped with a search button

Basic Example

<InputGroup>
  <TextInput value={value} placeholder="Search..." onChange={(e) => setValue(e.value)} />
  <Button>Search</Button>
</InputGroup>

URL Input with Protocol

Input with text prefix and multiple buttons

https://

<InputGroup>
  <span>https://</span>
  <TextInput value={url} placeholder="example.com" onChange={(e) => setUrl(e.value)} />
  <Button layout="outlined">Copy</Button>
  <Button>Visit</Button>
</InputGroup>

Email Input

Input with @ symbol addon

Price Input

Input with currency prefix and suffix

USD

File Upload

File input with upload button

Phone Number

Input with country code prefix

Import

import { InputGroup, TextInput, Button } from 'fluxo-ui';

Props

PropertyTypeDefaultDescription

childrenreq

ReactNode

—

Inputs and addons. `<span>`, `<div>`, `<label>`, `<small>`, `<p>` and any element with `data-input-group-addon` are treated as addons; everything else (TextInput, NumericInput, Button, etc.) renders inline. Fragments are flattened automatically.

childrenreq

ReactNode

ariaLabel

string

—

Accessible label for the group (sets aria-label on role=group)

ariaLabel

string

Accessible label for the group (sets aria-label on role=group)

ariaLabelledBy

string

—

ID of the element that labels the group

ariaLabelledBy

string

ID of the element that labels the group

disabled

boolean

false

Disable the entire group (sets aria-disabled)

disabled

booleanfalse

Disable the entire group (sets aria-disabled)

className

string

—

Additional CSS classes

className

string

Additional CSS classes

Features

Seamless Grouping

Automatically removes internal borders between adjacent grouped elements

Corner Radius

Rounds only the outer corners of the first and last elements automatically

Consistent Height

Maintains uniform height across all grouped elements regardless of type

Text Addons

Supports plain text spans as prefix or suffix addons alongside inputs and buttons

Flexible Composition

Mix and match TextInput, Button, and span addons in any order

Theming

Full dark/light and 5 brand themes via CSS variables — zero extra config