Input Group

An input group puts icons, text, and buttons inside a field's border, like a search icon, a unit suffix, or a show-password button. Buttons sit in the field's corners with an even 2px gap.

For a number with step buttons, use NumberField. To join a field to buttons outside it, use ButtonGroup.

Preview#

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/cubby-ui/dropdown-menu";

Installation#

npxnpx 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

Set each addon's side with align; a button on an inline addon's outer edge fits into the field's corner.

Examples#

Password Toggle#

Use InputGroupButton with size="icon" for an icon button in the field.

"use client";
 
import * as React from "react";
import {
  InputGroup,
  InputGroupAddon,

With Suffix#

Use align="inline-end" for units and currency codes.

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

Keyboard Shortcut#

Put a Kbd in an addon to show a shortcut.

import { Kbd } from "@/components/ui/cubby-ui/kbd";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/cubby-ui/input-group";

Size#

Use size to match an Input of the same size; buttons inside follow.

"use client";
 
import * as React from "react";
import { HugeiconsIcon } from "@hugeicons/react";
import { Cancel01Icon, Search01Icon } from "@hugeicons/core-free-icons";
 

Validation#

Set aria-invalid on the input to put the error ring on the group.

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

Elevated#

Use variant="elevated" inside a Card, Dialog, or popover; see Surfaces.

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,

Accessibility#

Labels#

The group renders role="group"; label the input itself with Label or FieldLabel. Give every icon-only button an aria-label.

Addons#

Clicking an addon's icon or text focuses the input or textarea; its buttons and links keep their own focus. Addon text isn't part of the input's name, so repeat a unit like "kg" in the label if it matters.

API Reference#

Input Group is a custom component built from plain HTML elements and Input, Textarea, and Button; every prop below is specific to it. Each part also accepts the props of what it renders.

Props#

InputGroup#

The field's border and fill. Renders a div with role="group".

InputGroupAddon#

Icons, text, or buttons beside the input. Renders a div.

InputGroupButton#

A button for an addon. Wraps Button.

Notes#

InputGroupInput / InputGroupTextarea#

Wrap Input and Textarea without their border and fill, which the group draws.

InputGroupText#

Muted text for an addon, like a prefix or a count. Renders a span.

Upgrading#

If you're reinstalling over an earlier version, check these changes: