Input Group

Import

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@timelycare/helix-ui"

Props

interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string
  children: React.ReactNode
}

interface InputGroupInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  className?: string
}

interface InputGroupTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  className?: string
}

interface InputGroupAddonProps extends React.HTMLAttributes<HTMLDivElement> {
  align?: "inline-start" | "inline-end" | "block-start" | "block-end"
  className?: string
  children: React.ReactNode
}

interface InputGroupButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "default" | "secondary" | "ghost" | "outline"
  size?: "default" | "sm" | "xs" | "icon-xs" | "icon-sm"
  className?: string
  children: React.ReactNode
}

interface InputGroupTextProps extends React.HTMLAttributes<HTMLSpanElement> {
  className?: string
  children: React.ReactNode
}

Styling

Container

Input

Addon

Typography

• Text addons: Adelle Sans Regular, 14px (text-sm), text-muted-foreground
• Input text: Adelle Sans Regular, 14px (text-sm), text-foreground

Addon Alignment

Common Patterns

Icon Prefix

<InputGroup>
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search..." />
</InputGroup>

Icon Suffix

<InputGroup>
  <InputGroupInput type="email" placeholder="Enter your email" />
  <InputGroupAddon align="inline-end">
    <MailIcon />
  </InputGroupAddon>
</InputGroup>

Both Sides

<InputGroup>
  <InputGroupAddon>
    <CreditCardIcon />
  </InputGroupAddon>
  <InputGroupInput placeholder="Card number" />
  <InputGroupAddon align="inline-end">
    <CheckIcon />
  </InputGroupAddon>
</InputGroup>

Text Addons (Currency)

<InputGroup>
  <InputGroupAddon>
    <InputGroupText>$</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput placeholder="0.00" />
  <InputGroupAddon align="inline-end">
    <InputGroupText>USD</InputGroupText>
  </InputGroupAddon>
</InputGroup>

URL Input

<InputGroup>
  <InputGroupAddon>
    <InputGroupText>https://</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput placeholder="example.com" />
</InputGroup>

With Button

<InputGroup>
  <InputGroupInput placeholder="Type to search..." />
  <InputGroupAddon align="inline-end">
    <InputGroupButton variant="secondary">Search</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

With Copy Button

<InputGroup>
  <InputGroupInput placeholder="https://example.com" readOnly />
  <InputGroupAddon align="inline-end">
    <InputGroupButton aria-label="Copy" size="icon-xs">
      <CopyIcon />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

With Spinner (Loading)

<InputGroup data-disabled>
  <InputGroupInput placeholder="Searching..." disabled />
  <InputGroupAddon align="inline-end">
    <Spinner />
  </InputGroupAddon>
</InputGroup>

Textarea with Footer

<InputGroup>
  <InputGroupTextarea placeholder="Enter your message" />
  <InputGroupAddon align="block-end">
    <InputGroupText className="text-muted-foreground text-xs">
      120 characters left
    </InputGroupText>
  </InputGroupAddon>
</InputGroup>

Code Editor Pattern

<InputGroup>
  <InputGroupTextarea placeholder="console.log('hello');" className="min-h-[200px]" />
  <InputGroupAddon align="block-start" className="border-b">
    <InputGroupText className="font-mono font-medium">script.js</InputGroupText>
    <InputGroupButton className="ml-auto" size="icon-xs">
      <CopyIcon />
    </InputGroupButton>
  </InputGroupAddon>
  <InputGroupAddon align="block-end" className="border-t">
    <InputGroupText>Line 1, Column 1</InputGroupText>
    <InputGroupButton size="sm" className="ml-auto" variant="default">
      Run
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Accessibility

• InputGroupInput is a standard <input> element — inherits all native accessibility
• InputGroupTextarea is a standard <textarea> — inherits all native accessibility
• Icon addons are decorative; use aria-label on buttons within addons
• Link aria-describedby to any visible hint/description text
• data-disabled on the container provides visual disabled state; also set disabled on the input

Gotchas

See Also

• Related Components: Input (standalone input), Textarea (standalone textarea), Button Group (button container), Spinner (loading indicator in addons)
• Tokens: Colors — input, ring, muted-foreground tokens

Last updated: February 24, 2026