Skip to content
Components

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 "@instruments/materia-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 "@instruments/materia-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 and its InputGroupInput/InputGroupTextarea becomes the field's control (labelled, described, aria-invalid) - pass hasError only to force error styling and aria-invalid independently.

Props

InputGroup

PropTypeDefaultDescription
radius"rounded" | "square" | "full"

Border radius style.

sizeResponsiveSize"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.

hasErrorboolean

Show error styling; overrides the invalid state inherited from an ancestor Field.

disabledboolean

Disable the input group and its children.

InputGroupAddon

PropTypeDefaultDescription
alignInputGroupAddonAlign

Alignment of the addon within the input group.

variantInputGroupAddonVariant

Visual variant of the addon.

InputGroupButton

PropTypeDefaultDescription
renderuseRender.RenderProp<Record<string, unknown>> | undefined

Replace the rendered <button> with another element or component (e.g. <Link href="…" />); styling, decorations and props are applied to it.

tone"neutral" | "brand" | "danger"

Button tone.

radius"rounded" | "square" | "full" | null | undefined
dotstring | undefined

CSS colour for a status dot; empty/undefined renders no dot.

loadingboolean | undefinedfalse

Show a spinner and block presses. The button stays focusable (it is aria-disabled, not natively disabled) so keyboard focus is kept.

squareboolean | null | undefined
iconimport("../../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.

asInputboolean | null | undefined
align"center" | "end" | "start" | null | undefined
pressedboolean | null | undefined
testIdstring
suffixIconIconComponent | undefined

Trailing icon (Lucide or SVG component) rendered at the end.

expandableboolean | undefinedfalse

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 square. The label stays in the DOM in both states (stable accessible name).

focusedboolean | undefined

Force the focus ring on - for documentation/testing only.

hoveredboolean | undefined

Force the hover state on - for documentation/testing only.

loadingLabelstring | undefined

Label shown in place of children while loading.

iconClassNamestring | undefined

Extra classes for the leading icon.

suffixIconClassNamestring | undefined

Extra classes for the trailing icon.

dotPlacement"end" | "start" | undefined"start"

Dot position relative to content.

InputGroupIcon

PropTypeDefaultDescription
icon(required)LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>

Icon component from lucide-react or any SVG React component.

InputGroupInput

PropTypeDefaultDescription
testIdstring

Test ID for testing.

InputGroupTextarea

PropTypeDefaultDescription
testIdstring

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, Flex, Icon, Textarea

Used by

CountrySelect, SearchInput