Components
Input Group
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
| Attribute | Type | Default | Description |
|---|---|---|---|
class
|
any |
nil
|
CSS classes for the group container |
rest
|
global |
||
:block_end
slot
|
slot |
full-width row below the input (e.g. a character counter) | |
:block_start
slot
|
slot |
full-width row above the input | |
:inner_block
slot
|
slot |
the input itself | |
:leading
slot
|
slot |
content rendered before the input (text, icon, button, kbd) | |
:trailing
slot
|
slot |
content rendered after the input (text, icon, button, kbd) |