Docs

Cinder UI

GitHub Hex
Original shadcn/ui docs ↗

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 compact buttons that should visually attach to the grouped controls.

Search with action 

  <.input_group>
  <.input placeholder="Search" />
  <.input_group_addon>
    <.input_group_button variant={:secondary}>Go</.input_group_button>
  </.input_group_addon>
</.input_group>

Handle input

@company.com 
  <.input_group>
  <.input placeholder="organization" />
  <.input_group_addon>
    <.input_group_text>@company.com</.input_group_text>
  </.input_group_addon>
</.input_group>

URL builder

https://
.com 
  <.input_group>
  <.input_group_addon>
    <.input_group_text>https://</.input_group_text>
  </.input_group_addon>
  <.input value="cinder-ui" />
  <.input_group_addon>
    <.input_group_text>.com</.input_group_text>
  </.input_group_addon>
</.input_group>

Command search

⌘K 
  <.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

Syncing 
  <.input_group>
  <.input placeholder="Generating invite link..." disabled />
  <.input_group_addon>
    <.spinner class="size-4" />
    <.input_group_text>Syncing</.input_group_text>
  </.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

0/280 
  <.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" />
  <.input_group_addon>
    <.input_group_button variant={:outline}>Copy</.input_group_button>
  </.input_group_addon>
</.input_group>

Icon actions 

  <.input_group>
  <.input value="ck_live_************************" readonly />
  <.input_group_addon>
    <.input_group_button size={:icon_xs} aria-label="Reveal key">
      <.icon name="eye" />
    </.input_group_button>
    <.input_group_button size={:icon_xs} aria-label="Copy key">
      <.icon name="copy" />
    </.input_group_button>
  </.input_group_addon>
</.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 —