Input Group

A wrapper for composing inputs with icons, affixes, and other elements.

Installation

Usage

import { Input } from "@/components/ui/input"
import { InputWrapper, InputIcon, InputAffix } from "@/components/ui/input-group"
<InputWrapper>
  <InputIcon>
    <StarIcon />
  </InputIcon>
  <Input placeholder="Add to favorites" />
</InputWrapper>

API Reference

InputWrapper

Container that wraps an input with icons and affixes. Renders as a <label> element.

InputIcon

Container for SVG icons. Automatically sizes icons to match the input.

InputAffix

Text or content placed before or after the input. When inline is false, a border separator is shown.

Examples

With End Icon

With Start Affix

With End Affix

With Start and End Affix

With Inline Affix

With Keyboard Shortcut

Disabled

With Button