Forms

Input Group

A composable wrapper that fuses prefix/suffix addons to an Input into one bordered field.

Import

tsx

import { InputGroup, InputGroupAddon } from "@cooud-ui/ui";

bash

npx cooud-ui add input-group

Examples

Prefix & suffix

Flank an `Input` with `InputGroupAddon`s on either side. The group owns the border and focus ring, so a protocol prefix and a domain suffix read as one seamless field.

https://

.cooud.app

tsx

<InputGroup>
  <InputGroupAddon>
    <Link2 />
    https://
  </InputGroupAddon>
  <Input placeholder="acme.cooud.app" />
  <InputGroupAddon align="end">.cooud.app</InputGroupAddon>
</InputGroup>

Leading icon

A single leading addon is perfect for an icon that frames the field's purpose.

tsx

<InputGroup>
  <InputGroupAddon>
    <AtSign />
  </InputGroupAddon>
  <Input type="email" placeholder="you@company.com" />
</InputGroup>

API Reference

Generated from the component's exported types.

InputGroupProps

Extends HTMLAttributes<HTMLDivElement>

No own props — see the extended type above for available props.

InputGroupAddonProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`align`	`"start" \| "end"`	`"start"`	Which side the addon flanks. Affects the divider edge. Defaults to "start".