Primitive / Moleculebeta

Input Group

An input with inline or block addons such as icons, text and buttons in one shared container.

Edit on GitHub

pnpm dlx @glinui/cli@latest add input-group

Share this board

Anyone with the link can view. Only members can comment.

https://

.glin.app

Enter

Installation

Install from

pnpm dlx @glinui/cli@latest add input-group

Prefer the package?

Usage

Variants

import { InputGroup, InputGroupInput } from "@glinui/ui"


export function Demo() {
  return (
    <div className="grid gap-3 sm:grid-cols-2">
      <InputGroup variant="glinr">
        <InputGroupInput aria-label="glinr" placeholder="glinr" />
      </InputGroup>
      <InputGroup variant="solid">
        <InputGroupInput aria-label="solid" placeholder="solid" />
      </InputGroup>
      <InputGroup variant="plain">
        <InputGroupInput aria-label="plain" placeholder="plain" />
      </InputGroup>
      <InputGroup variant="soft">
        <InputGroupInput aria-label="soft" placeholder="soft" />
      </InputGroup>
      <InputGroup variant="outline">
        <InputGroupInput aria-label="outline" placeholder="outline" />
      </InputGroup>
      <InputGroup variant="ghost">
        <InputGroupInput aria-label="ghost" placeholder="ghost" />
      </InputGroup>
    </div>
  )
}

Glass (opt-in)

Glass is opt-in and needs a backdrop behind it: pick Photo or Vivid in the stage backdrop switcher.

0 / 280

import { InputGroup, InputGroupAddon, InputGroupText, InputGroupTextarea } from "@glinui/ui"


export function Demo() {
  return (
    <InputGroup variant="glass">
      <InputGroupTextarea aria-label="Message" placeholder="Write a message..." />
      <InputGroupAddon align="block-end"><InputGroupText>0 / 280</InputGroupText></InputGroupAddon>
    </InputGroup>
  )
}

Accessibility

Container is `role="group"`; the control keeps native input semantics.
Focus ring and `aria-invalid` styling move to the whole container.
Icon addons are decorative; label the control itself.

Keyboard Interactions

Key	Action
`Tab`	Move between the control and addon buttons.

ARIA Attributes

`aria-invalid` on the control styles the container
`aria-label` on the control when no visible label

Reduced Motion

Border and shadow transitions are disabled under prefers-reduced-motion.

Affected properties

border-colorbox-shadow

API Reference

`InputGroup`

Prop	Type	Required	Default	Description
`variant`	`"glinr" \| "solid" \| "plain" \| "soft" \| "outline" \| "ghost" \| "glass" \| "liquid" \| "matte" \| "filled"`	-	`ambient (glinr)`	Surface of the shared container; the control inside stays transparent so radii stay concentric. Glass is opt-in.
`size`	`"sm" \| "md" \| "lg"`	-	`md`	Container height (h-8, h-9, h-10).
`align`	`"inline-start" \| "inline-end" \| "block-start" \| "block-end"`	No	`"inline-start"`	Variant option from inputGroupAddonVariants.

`InputGroupAddon`

Prop	Type	Required	Default	Description
`align`	`"inline-start" \| "inline-end" \| "block-start" \| "block-end"`	No	`inline-start`	Where the addon sits. Clicking it focuses the control.

`InputGroupInput / InputGroupTextarea`

Prop	Type	Required	Default	Description
`...props`	`input / textarea attributes`	-	`-`	Borderless control that inherits the container ring, invalid and disabled states.
`align`	`"inline-start" \| "inline-end" \| "block-start" \| "block-end"`	No	`"inline-start"`	Variant option from inputGroupAddonVariants.

`InputGroupButton`

Prop	Type	Required	Default	Description
`size`	`"xs" \| "sm"`	-	`xs`	Compact button; accepts every Button variant.
`align`	`"inline-start" \| "inline-end" \| "block-start" \| "block-end"`	No	`"inline-start"`	Variant option from inputGroupAddonVariants.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { InputGroup } from "@glinui/ui"

Source Files

input-group.tsx

input-group.test.tsxtest

Dependencies

@glinui/uiclass-variance-authority

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/input-group.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

InputGroupProps

`InputGroupAddonProps`

Prop	Type	Required	Default	Description
`align`	`"inline-start" \| "inline-end" \| "block-start" \| "block-end"`	No	`"inline-start"`	Variant option from inputGroupAddonVariants.

`InputGroupButtonProps`

Prop	Type	Required	Default	Description
`size`	`"xs" \| "sm"`	No	`"xs"`	-

`InputGroupProps`

Prop	Type	Required	Default	Description
`size`	`"sm" \| "md" \| "lg"`	No	`"xs"`	Variant option from inputGroupSizeVariants.
`variant`	`ControlVariantProp`	No	`"ghost"`	Surface look, shared with Input. Omit to follow the ambient design style (glinr = inset well). The group owns the surface; the control inside stays transparent so radii stay concentric.