Components Input Group

Petal Pro is the full SaaS app this is built for

Auth, billing, admin, and Claude Code integration included. One purchase, unlimited projects.

See what's included

Input Group

Compose addons around any input on a single field surface. The group carries the border, radius and focus ring; the input inside sheds its own surface automatically, so <.input> drops in unchanged. Text prefixes, icons, buttons and <kbd> hints all read as one control.
Text Addons

The classics: a protocol prefix, or a currency pair. Addon text sits in the muted tier so the value stays the loudest thing in the field.

https://
$
USD
heex
Icons and Keyboard Hints

Search fields everywhere: an icon up front, a shortcut hint at the back. Focus anywhere in the group and the whole surface rings - it is one control, not three.

⌘K
heex
Block Rows

:block_start and :block_end render full-width rows above and below the input - toolbars, helper text, character counters. Handy with a textarea.

0 / 280
heex
Properties
elixir 
          
  attr :class, :any, default: nil, doc: "CSS classes for the group container"
  attr :rest, :global
  slot :leading, doc: "content rendered before the input (text, icon, button, kbd)"
  slot :trailing, doc: "content rendered after the input (text, icon, button, kbd)"
  slot :block_start, doc: "full-width row above the input"
  slot :block_end, doc: "full-width row below the input (e.g. a character counter)"
  slot :inner_block, required: true, doc: "the input itself"