Input Group

A composite input component that combines inputs with addons, buttons, and icons.

Flexibility

Input Group provides a flexible way to create complex input patterns like search boxes, URL inputs, price inputs, and more by combining multiple elements into a single styled group.

Basic Usage

https://

USD

Input GroupAn input with addon elements

Installation

pnpm add @corew500/ui

Usage

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupButton,
  InputGroupText,
} from "@mordecai-design-system/ui"

<InputGroup>
  <InputGroupAddon align="inline-start">
    <InputGroupText>https://</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput placeholder="Enter URL" />
</InputGroup>

Examples

With Icon Prefix

import { Search } from "lucide-react"

<InputGroup>
  <InputGroupAddon align="inline-start">
    <Search className="size-4" />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search..." />
</InputGroup>

With Button Suffix

<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon align="inline-end">
    <InputGroupButton>
      <Search className="size-4" />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Price Input

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

With Textarea

<InputGroup>
  <InputGroupTextarea placeholder="Type your message..." />
  <InputGroupAddon align="inline-end">
    <InputGroupButton>
      <Send className="size-4" />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Stacked (Block Addons)

<InputGroup>
  <InputGroupAddon align="block-start">
    <InputGroupText>Label above</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput placeholder="Input field" />
  <InputGroupAddon align="block-end">
    <InputGroupText>Helper text below</InputGroupText>
  </InputGroupAddon>
</InputGroup>

Sub-components

| Component | Description | |-----------|-------------| | InputGroup | The main container that groups elements | | InputGroupAddon | Container for prefix/suffix content | | InputGroupInput | The input element | | InputGroupTextarea | A textarea variant | | InputGroupButton | A button inside the group | | InputGroupText | Text/icon content inside addon |

Props

InputGroup

Extends div props.

InputGroupAddon

Prop	Type	Default	Description
`align`	enum	`inline-start`	—

InputGroupButton

Prop	Type	Default	Description
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`variant`	enum	`ghost`	—
`animated`	enum	`true`	Enable hover scale and active press micro-interactions. Uses motion-safe media query to respect user preferences.
`loading`	enum	`false`	Show loading spinner and disable the button. When true, replaces iconStart with a spinner and sets aria-busy.
`iconStart`	enum	—	Icon to display at the start (left) of the button text. Automatically hidden when loading is true.
`iconEnd`	enum	—	Icon to display at the end (right) of the button text. Remains visible during loading state.
`fullWidth`	enum	`false`	Make the button expand to fill its container width.
`glow`	enum	`false`	Enable animated gradient glow effect on hover. Adds decorative gradient lines below the button.
`focusableWhenDisabled`	enum	`false`	Whether the button should be focusable when disabled.
`nativeButton`	enum	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (e.g. `<div>`).
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`size`	enum	`xs`	—
`type`	enum	`button`	Button type attribute.

InputGroupInput

Extends native input props.

InputGroupTextarea

Extends native textarea props.