Input Group

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>

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.

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.