Input Group

Text field with attached addons on either side.

Import

import { InputGroup } from '@marbleui/ui'

Props

<InputGroup>

Prop	Type	Default	Description
description	`ReactNode`	`—`
errorMessage	`string \| ((validation: ValidationResult) => string)`	`—`
label	`ReactNode`	`—`
leading	`ReactNode`	`—`	Boxed addon before the input (text like "https://", or a Select).
placeholder	`string`	`—`
trailing	`ReactNode`	`—`	Boxed addon after the input (text like ".com", or a Button).
variant	`FieldVariant`	`—`

Also accepts React Aria props (121).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Group · React Aria Input · React Aria TextField. Follow the primitive's docs for the full keyboard map.

Usage notes

Text field with attached addons before or after the input, such as https://, .com or a send button. Without addons use TextField.

<InputGroup label="Website" leading="https://" placeholder="acme" trailing=".com" />
<InputGroup
  label="Invite"
  type="email"
  trailing={<Button size="sm" variant="ghost">Send</Button>}
/>

leading and trailing take any node. A trailing node that contains a button loses the addon background.
Built on React Aria TextField: value + onChange, defaultValue, type, isRequired, validate.
Addons are not part of the field’s label. If an addon carries meaning, such as a currency, repeat it in label or description.

Example source · show

import { Button } from '../button'
import { InputGroup } from './input-group'

export const styles = {
  Addons: () => (
    <div className="flex w-80 flex-col gap-4">
      <InputGroup label="Website" leading="https://" placeholder="acme" trailing=".com" />
      <InputGroup label="Price" leading="$" placeholder="0.00" trailing="USD" />
    </div>
  ),
  'With button': () => (
    <InputGroup
      className="w-80"
      label="Invite teammates"
      type="email"
      placeholder="name@company.com"
      trailing={<Button size="sm" variant="ghost">Send</Button>}
    />
  ),
}

Source: packages/ui/src/input-group/input-group.tsx

Catalog

Category: inputs
Priority: Core
Primitive: composed
React Aria: Group
Base UI: Field