Input Group

The input group wraps an input or textarea together with icons, text, or buttons as a single bordered control. Use it for search fields with a leading icon, password fields with a visibility toggle, inputs with unit suffixes, or any field that needs inline addons.

Preview

Installation

npx shadcn@latest add @cubby-ui/input-group

Usage

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/cubby-ui/input-group";

<InputGroup>
  <InputGroupInput />
  <InputGroupAddon />
</InputGroup>
<InputGroup>
  <InputGroupInput />
  <InputGroupAddon>
    <InputGroupText />
  </InputGroupAddon>
  <InputGroupAddon>
    <InputGroupButton />
  </InputGroupAddon>
</InputGroup>
<InputGroup>
  <InputGroupTextarea />
  <InputGroupAddon>
    <InputGroupButton />
    <InputGroupText />
  </InputGroupAddon>
</InputGroup>
<InputGroup>
  <InputGroupInput />
  <InputGroupAddon />
</InputGroup>

Composition

InputGroup
├── InputGroupInput      (or InputGroupTextarea)
└── InputGroupAddon
    ├── InputGroupButton
    └── InputGroupText

Place one or more InputGroupAddon blocks alongside the input and position each with its align prop.

Examples

Password Toggle

Use InputGroupButton to create a visibility toggle for password fields.

With Suffix

Add unit labels or currency codes using align="inline-end".

Keyboard Shortcut

Display keyboard shortcuts using the Kbd component inside an addon.

Validation State

Use aria-invalid="true" on the input to show error styling on the group.

Elevated Variant

Use variant="elevated" on InputGroup so the group reads correctly on a Card, Dialog, or popover surface. The inner input is transparent, so the container's variant controls the whole group. See the Surfaces docs.

API Reference

The Input Group is a custom layout component for combining inputs with addons. All props listed below are custom to this implementation.

Props

InputGroup

Container that combines inputs with addons. Renders a div with role="group". Accepts standard div props.

InputGroupAddon

Container for icons, text, or buttons positioned relative to the input.

InputGroupButton

Styled button for use inside addons. Wraps the Button component with size variants optimized for input groups. Accepts all Button props except size.

InputGroupText

Styled text container for labels or static content inside addons. Renders a span. Accepts standard span props.

InputGroupInput

Styled input for use inside the group. Wraps the Input component with transparent styling. Accepts all Input props.

InputGroupTextarea

Styled textarea for multi-line inputs. Wraps the Textarea component with transparent styling. Accepts all Textarea props.