Forms.input_group
Server-rendered
Wraps an input and sibling controls (buttons/icons) in a single inline group.
Use input_group_addon/1 for static text, icons, status copy, or other non-interactive content that should visually attach to the grouped controls.
Search with action
<.input_group>
<.input placeholder="Search" />
<.button variant={:secondary} size={:xs}>Go</.button>
</.input_group>
Handle input
<.input_group>
<.input_group_addon>@</.input_group_addon>
<.input placeholder="organization" />
</.input_group>
URL builder
<.input_group>
<.input_group_addon>https://</.input_group_addon>
<.input value="cinder-ui" />
<.input_group_addon>.com</.input_group_addon>
</.input_group>
Command search
<.input_group>
<.input_group_addon>
<.icon name="search" class="size-4" />
</.input_group_addon>
<.input placeholder="Search components" />
<.input_group_addon>
<.kbd>⌘K</.kbd>
</.input_group_addon>
</.input_group>
Loading state
<.input_group>
<.input placeholder="Generating invite link..." disabled />
<.input_group_addon>
<.spinner class="size-4" />
<span>Syncing</span>
</.input_group_addon>
</.input_group>
Select + input
<.input_group>
<.native_select name="team-role" value="admin" class="w-32" aria-label="Team role">
<:option value="admin" label="Admin" />
<:option value="editor" label="Editor" />
<:option value="viewer" label="Viewer" />
</.native_select>
<.input placeholder="email@example.com" type="email" class="flex-1" />
</.input_group>
Textarea with footer action
<.input_group align={:block_end}>
<.textarea
rows={3}
placeholder="Write a comment..."
class="min-h-[5.5rem]"
/>
<.input_group_addon align={:block_end}>
<span>0/280</span>
<.button size={:sm}>Post</.button>
</.input_group_addon>
</.input_group>
Copy URL action
<.input_group>
<.input placeholder="https://example.com" />
<.button variant={:outline} size={:sm}>Copy</.button>
</.input_group>
Attributes
| Name | Type | Default | Values | Global Includes |
|---|---|---|---|---|
align
|
:atom |
:inline
|
:inline
,
:block_end
|
— |
class
|
:string |
— | — | — |
rest
|
:global |
— | — | — |
Slots
| Slot | Slot Attributes |
|---|---|
inner_block
Required
|
— |