InputGroup
A single-line input composition shell with leading or trailing addons.
https://.com
Controls
import { InputGroup, InputGroupInput } from "raft-ui";
<InputGroup>
<InputGroupInput />
</InputGroup>/
$USD
@example.com
Use variant="default" for light inline adornments such as search icons or keyboard hints. Use variant="container" when the addon is part of the value structure, like a protocol, domain suffix, unit, or icon box.
https://.com
Cmd K
Put data-invalid and disabled on InputGroupInput. The wrapper owns the visible state through has-*.
$USD
/
Use a valid email.
API#WIP
| Prop | Type | Default | Description |
|---|---|---|---|
...props | ComponentProps<"div"> | — | Native div attributes. Renders the shell that owns border, background, focus, invalid, and disabled styling. |
| Prop | Type | Default | Description |
|---|---|---|---|
align | "inline-start" | "inline-end" | "inline-start" | Which edge the addon hugs. |
variant | "default" | "container" | "default" | Use container for a muted addon box with an internal divider. |
...props | ComponentProps<"div"> | — | Native div attributes for icons, buttons, keyboard hints, or custom addon content. |
| Prop | Type | Default | Description |
|---|---|---|---|
align | "inline-start" | "inline-end" | "inline-start" | Which edge the static text hugs. |
variant | "default" | "container" | "default" | Use container for a muted text box with an internal divider. |
...props | ComponentProps<"span"> | — | Native span attributes for non-interactive text affixes such as currency or unit. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | InputProps | — | Same native input props as Input, including suppressPasswordManager. Carries data-slot=input-group-control. |