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.
...propsComponentProps<"div">
Native div attributes. Renders the shell that owns border, background, focus, invalid, and disabled styling.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | ComponentProps<"div"> | — | Native div attributes. Renders the shell that owns border, background, focus, invalid, and disabled styling. |
aligndefault: "inline-start""inline-start" | "inline-end"
Which edge the addon hugs.
variantdefault: "default""default" | "container"
Use container for a muted addon box with an internal divider.
...propsComponentProps<"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 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. |
aligndefault: "inline-start""inline-start" | "inline-end"
Which edge the static text hugs.
variantdefault: "default""default" | "container"
Use container for a muted text box with an internal divider.
...propsComponentProps<"span">
Native span attributes for non-interactive text affixes such as currency or unit.
| 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. |
...propsInputProps
Same native input props as Input, including suppressPasswordManager. Carries data-slot=input-group-control.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | InputProps | — | Same native input props as Input, including suppressPasswordManager. Carries data-slot=input-group-control. |