Input Group
Composes an input with leading/trailing addons, text labels, and icon buttons.
Install
Import path
Examples
Basic
Input fields wrapped in an InputGroup, composed with Field for labels and disabled states.
block-end
Use align='block-end' to position the addon below the input.
Footer positioned below the input.
Footer positioned below the textarea.
block-start
Use align='block-start' to position the addon above the input.
Header positioned above the input.
Header positioned above the textarea.
Custom Input
Here's an example of a custom resizable textarea from a third-party library.
Dropdown
Add addons, buttons, and helper content to inputs.
Icon
Add addons, buttons, and helper content to inputs.
In Card
Use input groups inside a Card form with fields, addons and a textarea.
inline-end
Use align='inline-end' to position the addon at the end of the input.
Icon positioned at the end.
inline-start
Use align='inline-start' to position the addon at the start of the input. This is the default.
Icon positioned at the start.
Kbd
Add addons, buttons, and helper content to inputs.
With Label
Add a Label inside an InputGroupAddon to title the input.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
تذييل موضع أسفل منطقة النص.
Spinner
Add addons, buttons, and helper content to inputs.
Text
Add addons, buttons, and helper content to inputs.
Textarea
Add addons, buttons, and helper content to inputs.
Textarea Variations
More InputGroupTextarea compositions with toolbars, labels and actions.
This is a description of the input group.
This is a description of the input group.
This is a description of the input group.
This is a description of the input group.
With Tooltip
Show contextual help on input group buttons with Tooltip.
Addons
Inline icons, text and buttons as input group addons.
This is a description of the input group.
With Kbd
Show keyboard shortcuts inside an input group with Kbd.
This username is available.
This is a description of the input group.
Tooltip and Popover
Combine input groups with tooltips, popovers and dropdown menus.
This is a description of the input group.
This is a description of the input group.
This is a description of the input group.
This is a description of the input group.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
InputGroup, InputGroupInput, InputGroupAddon, InputGroupText,
} from "@codefast/ui/input-group";
<InputGroup>
<InputGroupAddon align="inline-start">
<SearchIcon />
</InputGroupAddon>
<InputGroupInput placeholder="Search…" />
</InputGroup>
API reference
Props for each part of the component. All native element props are also forwarded.
InputGroup / InputGroupInput
A wrapper that frames the input with addons.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | An InputGroupInput plus one or more InputGroupAddon. |
InputGroupAddon
| Prop | Type | Default | Description |
|---|---|---|---|
| align | "inline-start" | "inline-end" | "block-start" | … | — | Where the addon sits relative to the input. |
InputGroupText / InputGroupButton
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | A static label (e.g. https://) or an interactive button. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- The whole group shows one focus ring, but the input is the focusable element.
- Label the input with a Label or aria-label; addons are not the field’s name.
- Give icon-only addon buttons an aria-label.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use for units, prefixes, and inline actions tied to a field.
- Keep addons short and scannable.
Don’t
- Don’t overload a field with many addons.
- Don’t hide the field’s real label.