baseui-cnInput Group
A composite input with addons, icons, and action buttons.
formcomposite
Loading preview...
Installation
npx baseui-cn add input-groupUsage
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
InputGroupButton,
InputGroupText,
InputGroupTextarea,
} from "@/components/ui/input-group"<InputGroup>
<InputGroupAddon align="inline-start">
<InputGroupText>https://</InputGroupText>
</InputGroupAddon>
<InputGroupInput placeholder="example.com" />
</InputGroup>Examples
With prefix
Text or icon prefix.
Loading preview...
With suffix button
Action button at the end.
Loading preview...
With both addons
Prefix and suffix together.
Loading preview...
Textarea
Use InputGroupTextarea for multiline input.
Loading preview...
API
InputGroupAddon
| Prop | Type | Default | Description |
|---|---|---|---|
align | "inline-start" | "inline-end" | "block-start" | "block-end" | "inline-start" | Position of the addon relative to the input — inline (leading/trailing) or block (above/below) |