Input Group

Display additional information or actions attached to an input or textarea using prefix, suffix, and footer slots.

Icon Prefix

Add an icon before the input with the :prefix slot and type="icon". Remember to add pl-9 padding to the input.

Icon Prefix

    <.input_group>
  <:prefix type="icon">
    <.icon name="lucide-search" class="size-4" />
  </:prefix>
  <input type="text" class="input pl-9" placeholder="Search..." />
</.input_group>
  

Text Prefix & Suffix

Add text labels on either side of the input. Adjust padding based on text length.

Currency Input

USD

Icon Suffix

Icons work on the suffix side too.

Email Input

    <.input_group>
  <:suffix type="icon">
    <.icon name="lucide-mail" class="size-4" />
  </:suffix>
  <input type="email" class="input pr-9" placeholder="Enter email" />
</.input_group>
  

Interactive Button

Use type="interactive" for clickable buttons that need pointer events enabled.

Copy Button

    <.input_group>
  <:suffix type="interactive">
    <button type="button" class="btn-icon-ghost size-6">
      <.icon name="lucide-copy" class="size-3.5" />
    </button>
  </:suffix>
  <input type="text" class="input pr-9" value="https://..." readonly />
</.input_group>
  

Textarea with Footer

Add a footer below textareas for actions or character counts.

With Footer

    <.input_group>
  <textarea class="textarea min-h-27 pb-12" placeholder="..."></textarea>
  <:footer>
    <button type="button" class="btn-icon-outline rounded-full size-6">
      <.icon name="lucide-paperclip" class="size-3.5" />
    </button>
    <div class="text-muted-foreground text-sm ml-auto">0/500</div>
  </:footer>
</.input_group>
  

Horizontal Layout

Use .input_group_horizontal for external prefix/suffix labels.

URL Input

https://

.com

    <.input_group_horizontal>
  <:prefix_label>https://</:prefix_label>
  <:suffix_label>.com</:suffix_label>
  <input type="text" class="input rounded-none" placeholder="example" />
</.input_group_horizontal>
  

Padding Guidelines

Remember: You need to manually add padding to inputs to make room for prefix/suffix content.

Icon prefix: pl-9
Icon suffix: pr-9
Short text prefix: pl-7
Short text suffix: pr-12
Textarea footer: pb-12