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.

  <.input_group>
    <:leading>https://</:leading>
    <.input type="text" name="site" value="" placeholder="yoursite.com" />
  </.input_group>

  <.input_group>
    <:leading>$</:leading>
    <.input type="text" name="amount" value="" placeholder="0.00" />
    <:trailing>USD</:trailing>
  </.input_group>

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.

  <.input_group>
    <:leading><.icon name="hero-magnifying-glass" class="h-4 w-4" /></:leading>
    <.input type="search" name="q" value="" placeholder="Search components" />
    <:trailing><kbd class="pc-kbd">⌘K</kbd></:trailing>
  </.input_group>

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.

  <.input_group>
    <.input type="textarea" name="bio" value="" placeholder="Tell us about your project" rows="3" />
    <:block_end class="justify-end">
      <span class="text-xs text-gray-400">0 / 280</span>
    </:block_end>
  </.input_group>

Properties