InputGroup

Composition container for inputs with addons, icons, and buttons. Distributes size/radius/disabled to its children via context, and inherits invalid state from an ancestor Field unless hasError is set explicitly. Import from "@desk/ui/components/input-group".

per m²

Usage

import { InputGroup, InputGroupAddon, InputGroupAddonAlign, inputGroupAddonMutedVariants, InputGroupAddonVariant, inputGroupAnatomy, InputGroupButton, InputGroupContext, inputGroupControlVariants, InputGroupIcon, InputGroupInput, InputGroupSize, inputGroupSizeToButtonSize, inputGroupSizeToIconSize, InputGroupTextarea, inputGroupVariants, useInputGroup, useOptionalInputGroup } from "@desk/ui/components/input-group";

Best practices

Compose with the InputGroup* parts (InputGroupInput, InputGroupIcon, InputGroupAddon, InputGroupButton) — a raw <input> won't receive the shared size/radius/disabled context.
Set size/radius/disabled once on InputGroup; children inherit them via context, so don't re-set them per child.
Inside a Field the group inherits invalid state — pass hasError only to force error styling independently.

Props

InputGroup

Prop	Type	Default	Description
radius	`"rounded" \| "square" \| "full"`		Border radius style.
size	`ResponsiveSize`	`"xl" (48px)`	Size of the input group — a single token or a per-breakpoint object like `{ base: "sm", md: "lg" }`. Children receive the resolved base size via context.
hasError	`boolean`		Show error styling; overrides the invalid state inherited from an ancestor Field.
disabled	`boolean`		Disable the input group and its children.

InputGroupAddon

Prop	Type	Default	Description
align	`InputGroupAddonAlign`		Alignment of the addon within the input group.
variant	`InputGroupAddonVariant`		Visual variant of the addon.

InputGroupButton

Prop	Type	Default	Description
asChild	`boolean \| undefined`	`false`	Merge props and styling onto the single child element via Slot.
tone	`"neutral" \| "brand" \| "danger"`		Button tone.
radius	`"rounded" \| "square" \| "full" \| null \| undefined`
dot	`string \| undefined`		CSS colour for a status dot; empty/undefined renders no dot.
loading	`boolean \| undefined`	`false`	Show a spinner and disable interaction.
square	`boolean \| null \| undefined`
icon	`import("../../tokens/icon-component").IconComponent & (LucideIcon \| React.ComponentType<React.SVGProps<SVGSVGElement>>)`		Leading icon (Lucide or SVG component); with no children it becomes an icon-only button. Icon to display.
emphasis	`"link" \| "outline" \| "solid" \| "ghost" \| "soft" \| "transparent"`		Button emphasis.
asInput	`boolean \| null \| undefined`
align	`"center" \| "end" \| "start" \| null \| undefined`
pressed	`boolean \| null \| undefined`
testId	`string`
suffixIcon	`IconComponent \| undefined`		Trailing icon (Lucide or SVG component) rendered at the end.
loadingLabel	`string \| undefined`		Label shown in place of `children` while `loading`.
iconClassName	`string \| undefined`		Extra classes for the leading icon.
suffixIconClassName	`string \| undefined`		Extra classes for the trailing icon.
dotPlacement	`"end" \| "start" \| undefined`	`"start"`	Dot position relative to content.
expandable	`boolean \| undefined`	`false`	Icon-only at rest; expands on hover/focus-visible to reveal the label to the right of the icon. Collapsed geometry equals the matching icon-* size, expanded equals the text button of that size — so pass a text size (`sm`/`base`/`lg`) OR its icon twin (`icon-sm` …); both resolve identically. Requires both `icon` and children; ignored with `asChild` or `square`. The label stays in the DOM in both states (stable accessible name).
focused	`boolean \| undefined`		Force the focus ring on — for documentation/testing only.
hovered	`boolean \| undefined`		Force the hover state on — for documentation/testing only.

InputGroupIcon

Prop	Type	Default	Description
icon(required)	`LucideIcon \| React.ComponentType<React.SVGProps<SVGSVGElement>>`		Icon component from lucide-react or any SVG React component.

InputGroupInput

Prop	Type	Default	Description
testId	`string`		Test ID for testing.

InputGroupTextarea

Prop	Type	Default	Description
testId	`string`		Test ID for testing.

Also exports

typeInputGroupAddonAlign
constinputGroupAddonMutedVariants
typeInputGroupAddonVariant
constinputGroupAnatomy
componentInputGroupContext
constinputGroupControlVariants
typeInputGroupSize
constinputGroupSizeToButtonSize
constinputGroupSizeToIconSize
constinputGroupVariants
constuseInputGroup
constuseOptionalInputGroup

Anatomy

InputGroup

input-group

Composition container for inputs with addons, icons, and buttons

InputGroupIcon

input-group-icon

Decorative icon (typically at inline-start)

InputGroupAddon

input-group-addon

Text or icon addon with alignment (inline-start, inline-end, block-start, block-end)

InputGroupInput / InputGroupTextarea

input-group-control

The form control element (input or textarea)

InputGroupButton

input-group-button

Action button (clear, copy, submit, etc.)

Composition

Builds on

Button, Field, Icon

Used by

SearchInput