InputGroup

InputGroup and InputAddon components for adding icons, text, and buttons inside or outside input fields.

import { InputGroup } from "@ninna-ui/forms"

pnpm add @ninna-ui/forms

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

InputGroup adds elements inside the input border (icons, text). InputAddon adds elements outside the input border.

import { Input, InputGroup, InputAddon } from "@ninna-ui/forms";
import { Search } from "lucide-react";

// With icon inside input
<InputGroup startElement={<Search className="w-4 h-4" />}>
  <Input placeholder="Search..." />
</InputGroup>

// With addon outside input
<div className="flex">
  <InputAddon placement="start">https://</InputAddon>
  <Input placeholder="example.com" className="rounded-l-none" />
</div>

With Icons

Use InputGroup to add icons inside the input field.

With Addon

Use InputAddon for text or elements outside the input border.

https://

@gmail.com

USD

Sizes

InputGroup supports all input sizes.

With Button

Add interactive elements with endElementPointerEvents='auto'.

API Reference

Complete list of props for InputGroup and InputAddon components.

InputGroup Props

Props

Prop	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the input group (affects padding for elements)
`startElement`	`ReactNode`	-	Element to render at the start (inside the input border)
`endElement`	`ReactNode`	-	Element to render at the end (inside the input border)
`startElementPointerEvents`	`'none' \| 'auto'`	`'none'`	Whether start element receives pointer events
`endElementPointerEvents`	`'none' \| 'auto'`	`'none'`	Whether end element receives pointer events

InputAddon Props

Props

Prop	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the addon
`placement`	`'start' \| 'end'`	`'start'`	Position of the addon relative to the input

Accessibility

Icons are decorative and hidden from screen readers with aria-hidden="true"
Use aria-label on inputs when icons replace visible labels
Interactive elements (buttons) maintain proper focus order
All standard HTML attributes including aria-label and aria-describedby are forwarded via ...props