Input Group

Group inputs with text or button addons.

Examples

Text Addon

$ 
<c-input-group input-group-classes="max-w-sm">
  <c-input-group-text>$</c-input-group-text>
  <c-input-group-input placeholder="Amount"></c-input-group-input>
</c-input-group>

Text

Display additional text information alongside inputs.

$ USD https:// .com @company.com 120 characters left 
<div class="grid w-full max-w-sm gap-6">
  <c-input-group>
    <c-input-group-text>$</c-input-group-text>
    <c-input-group-input
      class="flex flex-1"
      placeholder="0.00"
    ></c-input-group-input>
    <c-input-group-text align="inline-end">USD</c-input-group-text>
  </c-input-group>
  <c-input-group>
    <c-input-group-text>https://</c-input-group-text>
    <c-input-group-input
      class="flex flex-1"
      placeholder="example.com"
      input-group-input-classes="!ps-0.5"
    ></c-input-group-input>
    <c-input-group-text align="inline-end">.com</c-input-group-text>
  </c-input-group>
  <c-input-group>
    <c-input-group-input
      class="flex flex-1"
      placeholder="Enter your username"
    ></c-input-group-input>
    <c-input-group-text align="inline-end">@company.com</c-input-group-text>
  </c-input-group>
  <c-input-group>
    <c-textarea
      placeholder="Enter your message"
      textarea-classes="bg-transparent border-0 rounded-none shadow-none focus-visible:ring-0 min-h-16"
    ></c-textarea>
    <c-input-group-text
      align="block-end"
      input-group-text-classes="text-xs text-muted-foreground"
    >
      120 characters left
    </c-input-group-text>
  </c-input-group>
</div>

With Button

<c-input-group input-group-classes="max-w-sm">
  <c-input-group-input placeholder="Search"></c-input-group-input>
  <c-input-group-button align="inline-end" aria-label="Search">
    <c-lucide-icon icon="search" size="16"></c-lucide-icon>
  </c-input-group-button>
</c-input-group>

Tooltip

Add tooltips to provide additional context or help.

Password must be at least 8 characters

We'll use this to send you notifications

Click for help with API keys

 
<div class="grid w-full max-w-sm gap-4">
  <c-input-group>
    <c-input-group-input
      placeholder="Enter password"
      type="password"
    ></c-input-group-input>
    <c-input-group-button
      align="inline-end"
      variant="ghost"
      size="icon-xs"
      aria-label="Info"
      class="flex py-1.5 pe-1.5"
    >
      <c-tooltip delay-duration="200">
        <c-tooltip-trigger>
          <c-lucide-icon icon="info" size="16"></c-lucide-icon>
        </c-tooltip-trigger>
        <c-tooltip-content>
          <p>Password must be at least 8 characters</p>
        </c-tooltip-content>
      </c-tooltip>
    </c-input-group-button>
  </c-input-group>
  <c-input-group>
    <c-input-group-input placeholder="Your email address"></c-input-group-input>
    <c-input-group-button
      align="inline-end"
      variant="ghost"
      size="icon-xs"
      aria-label="Help"
      class="flex py-1.5 pe-1.5"
    >
      <c-tooltip delay-duration="200">
        <c-tooltip-trigger>
          <c-lucide-icon icon="circle-question-mark" size="16"></c-lucide-icon>
        </c-tooltip-trigger>
        <c-tooltip-content>
          <p>We'll use this to send you notifications</p>
        </c-tooltip-content>
      </c-tooltip>
    </c-input-group-button>
  </c-input-group>
  <c-input-group>
    <c-input-group-button
      align="inline-start"
      variant="ghost"
      size="icon-xs"
      aria-label="Help"
      class="flex py-1.5 ps-1.5"
    >
      <c-tooltip delay-duration="200">
        <c-tooltip-trigger>
          <c-lucide-icon icon="circle-question-mark" size="16"></c-lucide-icon>
        </c-tooltip-trigger>
        <c-tooltip-content side="left">
          <p>Click for help with API keys</p>
        </c-tooltip-content>
      </c-tooltip>
    </c-input-group-button>
    <c-input-group-input placeholder="Enter API key"></c-input-group-input>
  </c-input-group>
</div>

Button Group

https:// .com 
<c-input-group input-group-classes="max-w-sm">
  <c-input-group-input placeholder="Search"></c-input-group-input>
  <c-input-group-button align="inline-end" aria-label="Search">
    <c-lucide-icon icon="search" size="16"></c-lucide-icon>
  </c-input-group-button>
</c-input-group>

API Reference

InputGroup

Wrapper component that coordinates grouped inputs and addons.

Prop Type Default Description
input-group-classes string - Additional classes applied to the group container.

InputGroupInput

Input field designed for use inside an input group.

Prop Type Default Description
input-group-input-classes string - Additional classes applied to the input.
type string 'text' Input type.
value string '' Input value.
placeholder string '' Placeholder text.
disabled boolean false Whether the input is disabled.
required boolean false Whether the input is required.
readonly boolean false Whether the input is read-only.
aria-label string - Accessible label for screen readers.
aria-describedby string - ID of an element that describes the input.
aria-invalid string - Indicates whether the input value is invalid.

InputGroupText

Text addon for input groups.

Prop Type Default Description
align 'inline-start' | 'inline-end' | 'block-start' | 'block-end' 'inline-start' Alignment for the text addon.
input-group-text-classes string - Additional classes applied to the text addon.

InputGroupButton

Button addon for input groups.

Prop Type Default Description
size 'xs' | 'sm' | 'icon-xs' | 'icon-sm' 'xs' Button size for the input group.
variant 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' 'ghost' Button variant.
type 'button' | 'submit' | 'reset' 'button' Button type.
align 'inline-start' | 'inline-end' | 'block-start' | 'block-end' 'inline-end' Alignment for the button addon.
disabled boolean false Whether the button is disabled.
input-group-button-classes string - Additional classes applied to the button.

Events

The InputGroupInput component dispatches a valuechange event when its value changes.

inputGroupInput.addEventListener('valuechange', (event) => {
  console.log('New value:', event.detail.value);
});