InputGroup extends the standard input with prefix and suffix segments that can contain static text, selects, or interactive actions. Perfect for currency inputs, unit selectors, and multi-part fields.
Installation
npm install @soft-ui/react
Usage
import { InputGroup } from "@soft-ui/react/input-group"
<InputGroup
prefix="$"
placeholder="0.00"
suffix="USD"
/>
API Reference
Props
variant
'secondary' | 'tertiary'
default:"'secondary'"
Visual style variant:
secondary: Solid backgroundtertiary: Translucent with backdrop blur
size
's' | 'm' | 'l'
default:"'m'"
Size variant:
s: 32px heightm: 36px height (default)l: 40px height
Content for the prefix segment (text or select element)
Visual element before prefix content (icon, crypto, avatar)
prefixType
'static' | 'action' | 'select'
default:"'static'"
Type of prefix segment:
static: Non-interactive displayaction: Clickable segmentselect: Contains a select element
Click handler for prefix (when prefixType="action")
Content for the suffix segment (text or select element)
Visual element before suffix content
suffixType
'static' | 'action' | 'select'
default:"'static'"
Type of suffix segment
Click handler for suffix (when suffixType="action")
Icon shown before the input text (inside the main field)
Icon shown after the input text (inside the main field)
Only show focus ring on keyboard focus (not mouse clicks)
Whether the input is disabled
Additional CSS classes for the container
Explicit escape hatch for intentional structural overrides
placeholder, value, onChange, type, etc.) are supported.
Examples
<InputGroup
prefix="$"
placeholder="0.00"
suffix="USD"
type="number"
/>
With Unit Selector
<InputGroup
placeholder="Enter value"
suffix={
<select className="bg-transparent border-0 outline-none">
<option>px</option>
<option>em</option>
<option>rem</option>
<option>%</option>
</select>
}
suffixType="select"
/>
With Prefix Icon
import { RiSearchLine } from "@soft-ui/icons"
<InputGroup
prefixIcon={<RiSearchLine />}
prefix="Search"
placeholder="Enter query..."
/>
With Action Suffix
<InputGroup
placeholder="Enter password"
type="password"
suffix="Show"
suffixType="action"
onSuffixClick={() => console.log("Toggle visibility")}
/>
Crypto Amount
import { Crypto } from "@soft-ui/react/crypto"
<InputGroup
prefixIcon={<Crypto crypto="btc" size={16} />}
prefix="BTC"
placeholder="0.00000000"
type="number"
/>
Different Sizes
<div className="flex flex-col gap-4">
<InputGroup size="s" prefix="$" placeholder="Small" />
<InputGroup size="m" prefix="$" placeholder="Medium" />
<InputGroup size="l" prefix="$" placeholder="Large" />
</div>
Tertiary Variant
<InputGroup
variant="tertiary"
prefix="https://"
placeholder="example.com"
/>
Leading and Trailing Icons
import { RiSearchLine, RiCloseLine } from "@soft-ui/icons"
<InputGroup
leadingIcon={<RiSearchLine />}
placeholder="Search..."
trailingIcon={<RiCloseLine />}
/>
Disabled State
<InputGroup
prefix="$"
placeholder="0.00"
suffix="USD"
disabled
/>
Multiple Segments
<InputGroup
prefixIcon={<Crypto crypto="eth" size={16} />}
prefix={
<select className="bg-transparent border-0 outline-none">
<option>ETH</option>
<option>BTC</option>
<option>USDC</option>
</select>
}
prefixType="select"
placeholder="0.00"
suffix={
<select className="bg-transparent border-0 outline-none">
<option>USD</option>
<option>EUR</option>
<option>GBP</option>
</select>
}
suffixType="select"
/>