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.

Plain inputs, selects, native selects, and both autocomplete variants become seamless automatically when they are direct children. The group owns their border, radius, shadow, and focus ring while popup content remains visible.

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>

Autocomplete input group

Owner 
  <div class="pb-40">
  <.input_group>
    <.input_group_addon>
      <.input_group_text>Owner</.input_group_text>
    </.input_group_addon>
    <.autocomplete
      id="group-owner-search"
      name="owner"
      placeholder="Search teammates..."
      open={true}
    >
      <:option value="levi" label="Levi Buzolic" />
      <:option value="mira" label="Mira Chen" />
      <:option value="sam" label="Sam Hall" />
    </.autocomplete>
  </.input_group>
</div>

Autocomplete popup input group

Country 
  <div class="pb-40">
  <.input_group>
    <.input_group_addon>
      <.input_group_text>Country</.input_group_text>
    </.input_group_addon>
    <.autocomplete
      id="group-country-search"
      name="country"
      value="au"
      variant={:popup}
      placeholder="Search countries..."
      open={true}
    >
      <:option value="au" label="Australia" />
      <:option value="nz" label="New Zealand" />
      <:option value="us" label="United States" />
    </.autocomplete>
  </.input_group>
</div>

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 —