Input Group
Input or textarea with icons, text, buttons and menus attached inside one frame, inline or as header and footer rows, in every input size and style.
import { InputGroup } from "@plexui/ui/components/InputGroup";For a single icon or action button inside a plain field, Input with startAdornment / endAdornment is enough. Reach for InputGroup when the field needs text prefixes and suffixes, buttons with labels, menus, or a header and footer row.
Examples
Overview
Variants
Sizes
Align
Text
Button
Dropdown
Spinner
Textarea
API
InputGroup
| Prop | Type | Default | Description |
|---|---|---|---|
size | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "md" | Control height, on the same scale as Input (22px to 48px) |
variant | "outline" | "soft" | "outline" | Visual style of the frame |
pill | boolean | false | Fully rounded frame, with pill buttons inside |
disabled | boolean | false | Disables the control and the buttons inside |
invalid | boolean | false | Invalid border; sets aria-invalid on the control |
className | string | Applied to the root <div> |
Renders a <div role="group">. All other <div> attributes are forwarded. Clicking the frame, an icon or text focuses the control.
InputGroup.Input
A native <input> (type="text" by default) without its own frame. Takes every <input> attribute; disabled and aria-invalid default to the group's state.
InputGroup.Textarea
A native <textarea> with rows={3} by default. Same props and defaults as InputGroup.Input.
InputGroup.Addon
| Prop | Type | Default | Description |
|---|---|---|---|
align | "inline-start" | "inline-end" | "block-start" | "block-end" | "inline-start" | Before or after the control on its line, or a row above or below it |
className | string | Applied to the addon <div> |
InputGroup.Button
Takes the Button props except size, which follows the group. color defaults to "secondary", variant to "ghost", and pill and disabled to the group's values.
InputGroup.Text
A <span> for text and icons inside an addon. All <span> attributes are forwarded.
Styling
The frame uses the Input tokens: --input-outline-border-color (and its -hover and -focus states), --input-soft-background-color, --input-soft-border-color-focus, --input-border-color-invalid, --input-text-color and --input-placeholder-text-color, which also colors addon icons and text.