Components

Input group

Glue an input to a leading or trailing addon — icon, prefix text, kbd shortcut, or inline button. Same focus ring and validation styling as a plain Input.

When to usewhen an input needs a persistent affix — search icon, unit, protocol, copy button.

Import

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
  InputGroupButton,
} from "@ravnhq/efni/input-group"

Leading icon

<InputGroup>
  <InputGroupAddon>
    <Icon icon={Search} />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search missions…" />
</InputGroup>

Trailing button

<InputGroup>
  <InputGroupInput readOnly value="…" />
  <InputGroupAddon align="inline-end">
    <InputGroupButton aria-label="Copy">
      <Icon icon={Copy} />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Prefix text

https://

<InputGroup>
  <InputGroupAddon>
    <InputGroupText>https://</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput placeholder="mission.slug" />
</InputGroup>

Invalid

Guidelines

Give inline InputGroupButton an aria-label — the icon alone doesn't name it.
Use InputGroupText for units and protocols; use InputGroupAddon for icons and buttons.
Keep the addon narrow — the input still needs room to read the value.

Don't

Don't stack more than one addon per side; it turns into a taskbar.
Don't put a destructive action inside an InputGroupButton — hide it behind a menu instead.
Don't wrap InputGroupInput in a Label; use htmlFor like a normal Input.

Props

Prop	Type	Default	Description
`InputGroupAddon.align`	`"inline-start" \| "inline-end" \| "block-start" \| "block-end"`	`"inline-start"`
`InputGroupButton.size`	`"xs" \| "sm" \| "icon-xs" \| "icon-sm"`	`"xs"`
`InputGroupButton.type`	`"button" \| "submit" \| "reset"`	`"button"`	Button type. Defaults to button so it never submits a form by accident.
`…props (InputGroupInput)`	`React.ComponentProps<"input">`	—	Everything InputGroupInput passes to the element it renders.
`…props (InputGroup)`	`React.ComponentProps<"div">`	—	Everything InputGroup passes to the element it renders.