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,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
InputGroupText,
InputGroupTextarea,
} from "@plexui/vue/components/InputGroup";For a single icon or action button inside a plain field, Input with the #startAdornment / #endAdornment slots 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 |
class | string | Applied to the root <div> |
Renders a <div role="group">. All other <div> attributes and listeners fall through. Clicking the frame, an icon or text focuses the control.
InputGroupInput
A native <input> (type="text" by default) without its own frame. Takes v-model:value (value + update:value), default-value for an uncontrolled field, and every <input> attribute; disabled and aria-invalid default to the group's state.
InputGroupTextarea
A native <textarea> with rows="3" by default. Same props and defaults as InputGroupInput.
InputGroupAddon
| 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 |
class | string | Applied to the addon <div> |
InputGroupButton
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.
InputGroupText
A <span> for text and icons inside an addon. All <span> attributes fall through.
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.