Forms

Input Group

Compose an Input with adornments, addon icons, trailing buttons, prefix labels.

Preview

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from '@brika/clay/components/input-group';

/** Currency field with dollar-sign prefix and currency code suffix. */
export default function InputGroupDefaultDemo() {
  return (
    <div className="w-full max-w-xs">
      <InputGroup>
        <InputGroupAddon>
          <InputGroupText>$</InputGroupText>
        </InputGroupAddon>
        <InputGroupInput placeholder="0.00" type="number" min={0} step={0.01} />
        <InputGroupAddon align="inline-end">
          <InputGroupText>USD</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

01 Installation

Install

Pull Input Group from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { InputGroup } from "@brika/clay";

tsxGranular1 line

import { InputGroup } from "@brika/clay/components/input-group";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxInput Group.tsx23 lines

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from '@brika/clay/components/input-group';

/** Currency field with dollar-sign prefix and currency code suffix. */
export default function InputGroupDefaultDemo() {
  return (
    <div className="w-full max-w-xs">
      <InputGroup>
        <InputGroupAddon>
          <InputGroupText>$</InputGroupText>
        </InputGroupAddon>
        <InputGroupInput placeholder="0.00" type="number" min={0} step={0.01} />
        <InputGroupAddon align="inline-end">
          <InputGroupText>USD</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

03 Examples

Input Group, every way

Code Editor

Multiline editor with a file-header toolbar and a footer Run action.

GitHub

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupTextarea,
} from '@brika/clay/components/input-group';
import { Copy, CornerDownLeft, FileCode2, RotateCw } from 'lucide-react';

/** Multiline editor with a file-header toolbar and a footer Run action. */
export default function InputGroupCodeEditorDemo() {
  return (
    <div className="w-full max-w-md">
      <InputGroup>
        <InputGroupAddon align="block-start" className="border-b">
          <InputGroupText className="font-mono font-medium">
            <FileCode2 />
            script.js
          </InputGroupText>
          <InputGroupButton className="ml-auto" size="icon-xs" aria-label="Reload">
            <RotateCw />
          </InputGroupButton>
          <InputGroupButton variant="ghost" size="icon-xs" aria-label="Copy">
            <Copy />
          </InputGroupButton>
        </InputGroupAddon>
        <InputGroupTextarea
          placeholder="console.log('Hello, world!');"
          className="min-h-50 font-mono"
        />
        <InputGroupAddon align="block-end" className="border-t">
          <InputGroupText className="text-xs">Line 1, Column 1</InputGroupText>
          <InputGroupButton size="sm" className="ml-auto" variant="default">
            Run <CornerDownLeft />
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

Email

Username field with a fixed company domain suffix.

GitHub

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from '@brika/clay/components/input-group';

/** Username field with a fixed company domain suffix. */
export default function InputGroupEmailDemo() {
  return (
    <div className="w-full max-w-sm">
      <InputGroup>
        <InputGroupInput placeholder="Enter your username" />
        <InputGroupAddon align="inline-end">
          <InputGroupText>@company.com</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

Kbd

Search input with a trailing ⌘K keyboard shortcut hint.

GitHub

import { Kbd } from '@brika/clay/components/kbd';
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from '@brika/clay/components/input-group';
import { Search } from 'lucide-react';

/** Search input with a trailing ⌘K keyboard shortcut hint. */
export default function InputGroupKbdDemo() {
  return (
    <div className="w-full max-w-sm">
      <InputGroup>
        <InputGroupInput placeholder="Search..." />
        <InputGroupAddon>
          <Search className="size-4" />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <Kbd>⌘K</Kbd>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

Search

Search field with a leading icon and a trailing clear button.

GitHub

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from '@brika/clay/components/input-group';
import { Search, X } from 'lucide-react';

/** Search field with a leading icon and a trailing clear button. */
export default function InputGroupSearchDemo() {
  return (
    <div className="w-full max-w-xs">
      <InputGroup>
        <InputGroupAddon>
          <Search className="size-4" />
        </InputGroupAddon>
        <InputGroupInput placeholder="Search components…" />
        <InputGroupAddon align="inline-end">
          <InputGroupButton variant="ghost" size="icon-xs" aria-label="Clear search">
            <X className="size-3.5" />
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

Textarea

Multiline field with a block-end helper showing remaining characters.

GitHub

import {
  InputGroup,
  InputGroupAddon,
  InputGroupText,
  InputGroupTextarea,
} from '@brika/clay/components/input-group';
import * as React from 'react';

const MAX_MESSAGE_LENGTH = 120;

/** Multiline field with a block-end helper showing remaining characters. */
export default function InputGroupTextareaDemo() {
  const [message, setMessage] = React.useState('');
  const remaining = MAX_MESSAGE_LENGTH - message.length;
  return (
    <div className="w-full max-w-sm">
      <InputGroup>
        <InputGroupTextarea
          placeholder="Enter your message"
          rows={3}
          maxLength={MAX_MESSAGE_LENGTH}
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        />
        <InputGroupAddon align="block-end">
          <InputGroupText className="text-xs text-muted-foreground">
            {remaining} character{remaining === 1 ? '' : 's'} left
          </InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

Url

URL field with scheme prefix and TLD suffix.

GitHub

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from '@brika/clay/components/input-group';

/** URL field with scheme prefix and TLD suffix. */
export default function InputGroupUrlDemo() {
  return (
    <div className="w-full max-w-sm">
      <InputGroup>
        <InputGroupAddon>
          <InputGroupText>https://</InputGroupText>
        </InputGroupAddon>
        <InputGroupInput placeholder="example" type="text" className="pl-0.5!" />
        <InputGroupAddon align="inline-end">
          <InputGroupText>.com</InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

04 Accessibility

Accessibility

Addons are presentational, always pair the group with a <Label> that describes the full field.
Icon-only addon buttons require an aria-label.
The visible prefix (e.g. "https://") is part of the label context; announce it via aria-label on the input if needed.

05 Tokens 9 theme-overridable

Theme tokens

Every CSS variable Input Group reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Input Group without touching component code.

Input Group tokens

9 tokens

ColorFill, border, and text colors.8

--input-group-containercolorvar(--input-container)
components.inputGroup.container
Background color of the InputGroup wrapper. Inherits the standalone Input container so themes that retune `--input-container` retune the group automatically.
--input-group-labelcolorvar(--input-label)
components.inputGroup.label
Default foreground color of text rendered inside the InputGroup wrapper. Mirrors `--input-label`.
--input-group-bordercolorvar(--input-border)
components.inputGroup.border
Resting border color of the InputGroup wrapper. Mirrors `--input-border`.
--input-group-focus-bordercolorvar(--ring)
components.inputGroup.focusBorder
Border color drawn on the wrapper when the inner control receives keyboard focus (`focus-visible`). Pairs with `focus-ring` to render the focus halo.
--input-group-focus-ringcolorvar(--ring)
components.inputGroup.focusRing
Color of the 3px focus halo painted around the wrapper when the inner control is focus-visible. Rendered at 50% opacity to soften the outer glow.
--input-group-invalid-ringcolorvar(--destructive)
components.inputGroup.invalidRing
Single color driving the invalid state: the wrapper border uses it directly while the surrounding ring uses it at 20% (light) / 40% (dark) opacity.
--input-group-addon-labelcolorvar(--muted-foreground)
components.inputGroup.addonLabel
Foreground color of inline addon content (icons, text, kbd) docked at the start or end of the group.
--input-group-text-labelcolorvar(--muted-foreground)
components.inputGroup.textLabel
Foreground color of `InputGroupText` spans rendered inside the group (helper labels, separators).

ElevationDrop shadow and depth.1

--input-group-backdrop-blurblur0px
components.inputGroup.backdropBlur
Backdrop blur applied to the input-group surface. Set non-zero for a frosted-glass treatment.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.inputGroup, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "inputGroup": {
      "container": "var(--input-container)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-input-group-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Input Group. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

<InputGroup />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<InputGroupAddon />

1 prop

aligndefault 'inline-start'
'inline-start' | 'inline-end' | 'block-start' | 'block-end'
Which edge the addon docks against.

<InputGroupButton />

2 props

sizedefault 'xs'
'xs' | 'sm' | 'icon-xs' | 'icon-sm'
Size preset for the addon button.
variantdefault 'ghost'
React.ComponentProps<typeof Button>['variant']
Visual preset for the addon button.

<InputGroupControlIdContext />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<InputGroupInput />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<InputGroupText />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<InputGroupTextarea />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.