input-group

Input Group

An input or textarea with addons beside, above or below it, such as a search icon, a unit or a button that submits.

States: Default, Focus, Invalid

Parts

Part	File	Does
InputGroup	InputGroup.vue	Groups an input with addons such as icons, buttons or text.
InputGroupAddon	InputGroupAddon.vue	Places an icon, text or button beside the input of its group.
InputGroupButton	InputGroupButton.vue	Lets the user act on the input of its group, such as submit it.
InputGroupInput	InputGroupInput.vue	Lets the user enter a single line of text inside the group.
InputGroupText	InputGroupText.vue	Shows fixed text, such as a unit or prefix, inside the group.
InputGroupTextarea	InputGroupTextarea.vue	Lets the user enter several lines of text inside the group.

Anatomy

<InputGroup>
  <InputGroupInput />
  <InputGroupAddon>
    <InputGroupButton />
  </InputGroupAddon>
</InputGroup>

Styling

Part	Recipe
InputGroup	input-group
InputGroupAddon	input-group-addon
InputGroupButton	input-group-button
InputGroupInput	input-group-input
InputGroupText	input-group-text
InputGroupTextarea	input-group-textarea

Install

Writes 8 files into components/ui/input-group/. For agents, npx @frontic/ui docs input-group prints this reference as markdown; the MCP server serves the same.

Installs with it: button; input; textarea
npm packages: class-variance-authority; reka-ui

Built from

Button Input Textarea

API reference

InputGroup InputGroup.vue

Groups an input with addons such as icons, buttons or text. Renders a <div>.

Prop	Type	Default
asChild	boolean	false

as	AsTag \| Component	'div'
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default 'div'
class	ClassValue	—

size	InputGroupSize	—

Data attribute	Values
data-size	'md' \| 'sm'

Recipe input-group	Sets
base: input-group	16 properties · 9 inherited
height spacing.102.5rem display `flex` width `full` minWidth spacing.00rem alignItems `center` focusWithin › borderBottom border.focus2px solid #71717a invalidWithin › borderBottomColor colors.destructive#c70009 backgroundColor `transparent` from @control border border.default1px solid #e4e4e7 from @control borderColor `transparent` from @control borderBottomColor colors.input#a1a1aa from @control rounded rounded.none0px from @control typography typography.control400 1rem/1.5 'Inter Variable', Inter, sans-serif from @control placeholderColor colors.muted-foreground#66666f from @control focus › borderBottom border.focus2px solid #71717a from @control invalid › borderBottomColor colors.destructive#c70009 from @control
size: sm	1 property

Parts

Anatomy

Styling

Install

Built from

API reference

InputGroup InputGroup.vue

InputGroupAddon InputGroupAddon.vue

InputGroupButton InputGroupButton.vue

InputGroupInput InputGroupInput.vue

InputGroupText InputGroupText.vue

InputGroupTextarea InputGroupTextarea.vue