InputGroup

A container for grouping input elements with addons and icons.

Import

import { 
  InputGroup,
  InputLeftAddon,
  InputRightAddon,
  InputLeftElement,
  InputRightElement 
} from '@akitectio/aki-ui'

// TypeScript types
import type { 
  InputGroupProps,
  InputAddonProps,
  InputElementProps 
} from '@akitectio/aki-ui'

Left and Right Addons

Text Addons

https://
@example.com
$USD
import { InputGroup, InputLeftAddon, InputRightAddon } from '@akitectio/aki-ui'

// Left addon
<InputGroup>
  <InputLeftAddon>https://</InputLeftAddon>
  <Input placeholder="example.com" />
</InputGroup>

// Right addon  
<InputGroup>
  <Input placeholder="username" />
  <InputRightAddon>@example.com</InputRightAddon>
</InputGroup>

// Both addons
<InputGroup>
  <InputLeftAddon>$</InputLeftAddon>
  <Input type="number" placeholder="0.00" />
  <InputRightAddon>USD</InputRightAddon>
</InputGroup>

Left and Right Elements

Icon Elements

USD
import { 
  InputGroup, 
  InputLeftElement, 
  InputRightElement 
} from '@akitectio/aki-ui'
import { MagnifyingGlassIcon, UserIcon, EyeIcon } from '@heroicons/react/24/outline'

// Left element
<InputGroup>
  <InputLeftElement>
    <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
  </InputLeftElement>
  <Input placeholder="Search..." />
</InputGroup>

// Right element
<InputGroup>
  <Input placeholder="Enter username" />
  <InputRightElement>
    <UserIcon className="h-5 w-5 text-gray-400" />
  </InputRightElement>
</InputGroup>

// Clickable right element
<InputGroup>
  <Input type="password" placeholder="Enter password" />
  <InputRightElement>
    <button onClick={toggleShowPassword}>
      <EyeIcon className="h-5 w-5 text-gray-400" />
    </button>
  </InputRightElement>
</InputGroup>

// Both elements
<InputGroup>
  <InputLeftElement>
    <CurrencyDollarIcon className="h-5 w-5 text-gray-400" />
  </InputLeftElement>
  <Input type="number" placeholder="0.00" />
  <InputRightElement>
    <span className="text-gray-500 text-sm">USD</span>
  </InputRightElement>
</InputGroup>

Sizes

Different Sizes

$
$
$
// Different sizes
<InputGroup size="sm">
  <InputLeftAddon>$</InputLeftAddon>
  <Input placeholder="0.00" />
</InputGroup>

<InputGroup size="md">
  <InputLeftAddon>$</InputLeftAddon>
  <Input placeholder="0.00" />
</InputGroup>

<InputGroup size="lg">
  <InputLeftAddon>$</InputLeftAddon>
  <Input placeholder="0.00" />
</InputGroup>

API Reference

InputGroup Props

PropTypeDefaultDescription
size'sm' | 'md' | 'lg''md'Size of the input group
variant'outline' | 'filled' | 'flushed''outline'Visual variant
isDisabledbooleanfalseDisable the entire input group
isInvalidbooleanfalseMark as invalid state

InputAddon Props

PropTypeDefaultDescription
childrenReactNode-Content of the addon

InputElement Props

PropTypeDefaultDescription
childrenReactNode-Content of the element (icon, button, etc.)
placement'left' | 'right'-Position of the element

Accessibility

  • Supports proper focus management across input and elements
  • ARIA attributes are properly applied to all parts
  • Screen reader compatible with addon/element descriptions
  • Keyboard navigation works seamlessly
  • Disabled state is properly communicated
  • Invalid state includes appropriate ARIA attributes