SutraUI.InputGroup (Sutra UI v0.3.0)

View Source

Display additional information or actions attached to an input or textarea.

Input groups allow you to add prefixes, suffixes, and footers to form inputs using relative/absolute positioning. This component handles positioning and provides consistent styling patterns.

Padding Guidelines

You need to manually add padding to the input/textarea to make room for prefix/suffix content:

  • Icon prefix: pl-9
  • Icon suffix: pr-9
  • Text prefix (short): pl-7
  • Text suffix (short): pr-12
  • Text prefix (long): pl-15 or pl-21
  • Text suffix (long): pr-15, pr-20, or pr-30
  • Multiple icons: adjust based on count (e.g., pr-16 for two icons)
  • Textarea footer: pb-12

Slot Types

  • type="icon" - For icons (adds icon sizing styles)
  • type="interactive" - For buttons or clickable elements (enables pointer events)
  • No type (default) - For text content

Examples

# Icon prefix
<.input_group>
  <:prefix type="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
  </:prefix>
  <input type="text" class="input pl-9" placeholder="Search..." />
</.input_group>

# Text prefix and suffix
<.input_group>
  <:prefix>$</:prefix>
  <:suffix>USD</:suffix>
  <input type="text" class="input pl-7 pr-12" placeholder="0.00" />
</.input_group>

# Interactive button suffix
<.input_group>
  <:suffix type="interactive">
    <button type="button" class="btn-icon-ghost size-6">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></svg>
    </button>
  </:suffix>
  <input type="text" class="input pr-9" value="https://example.com" readonly />
</.input_group>

# With textarea and footer
<.input_group>
  <textarea class="textarea min-h-27 pb-12" placeholder="Enter message..."></textarea>
  <:footer>
    <button type="button" class="btn-icon-outline rounded-full size-6">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
    </button>
    <div class="text-muted-foreground text-sm ml-auto">52% used</div>
  </:footer>
</.input_group>

Summary

Functions

input_group(assigns)

Renders an input group with optional prefix and suffix content.

input_group_horizontal(assigns)

Renders a horizontal input group with prefix/suffix labels outside the input.

Functions

input_group(assigns)

Renders an input group with optional prefix and suffix content.

Attributes

  • class - Additional CSS classes for the wrapper.

Slots

  • inner_block - Required. The input or textarea element with appropriate padding classes.
  • prefix - Content to display before the input (left side). Accepts type attribute.
  • suffix - Content to display after the input (right side). Accepts type attribute.
  • footer - Content to display at the bottom of textarea inputs.

Attributes

  • class (:any) - Additional CSS classes for the wrapper. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes for the wrapper. Supports all globals plus: ["id"].

Slots

  • prefix - Content to display before the input (left side). Accepts attributes:
    • type (:string) - Must be one of "icon", "interactive", or "text".
  • suffix - Content to display after the input (right side). Accepts attributes:
    • type (:string) - Must be one of "icon", "interactive", or "text".
  • footer - Content to display at the bottom of textarea inputs.
  • inner_block (required) - The input or textarea element with appropriate padding classes.

input_group_horizontal(assigns)

Renders a horizontal input group with prefix/suffix labels outside the input.

This is for cases where you want to visually group an input with external labels, like "https://" [input] ".com".

Examples

<.input_group_horizontal>
  <:prefix_label>https://</:prefix_label>
  <:suffix_label>.com</:suffix_label>
  <input type="text" class="input rounded-none" />
</.input_group_horizontal>

Attributes

  • class (:any) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes. Supports all globals plus: ["id"].

Slots

  • prefix_label - Label content before the input.
  • suffix_label - Label content after the input.
  • inner_block (required) - The input element (typically with rounded-none class).