Component

Input Group

A flex container that visually joins inputs with text addons, icons, and buttons into a single seamless control. Built on the headless @refraction-ui/input-group core.

Text & addons

Use InputGroupText for inline labels like $ or https://, and InputGroupAddon for bordered icon/text slots.

$USD

https://

Installation

$pnpm add @refraction-ui/react-input-group

Usage

tsx

import {
  InputGroup,
  InputGroupText,
  InputGroupButton,
} from '@refraction-ui/react'

export function MyComponent() {
  return (
    <InputGroup>
      <InputGroupText>$</InputGroupText>
      <input placeholder="0.00" />
      <InputGroupButton>Pay</InputGroupButton>
    </InputGroup>
  )
}

With a button

InputGroupButton sits flush against the input — perfect for search and subscribe fields.

Vertical orientation

Set orientation="vertical" to stack controls in a column. Pass the same orientation to addons and buttons so the radius clipping lines up.

Props

InputGroupAddon and InputGroupButton also accept the orientation prop; InputGroupText takes standard span attributes.

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Lays the group out in a row or a column. Border-radius clipping on the first/last children adapts to match.
`className`	`string`	--	Additional CSS classes to apply to the group container.
`...props`	`React.HTMLAttributes<HTMLDivElement>`	--	All standard div attributes (id, aria-label, etc.) are forwarded.