Input Group
Display additional information or actions to an input or textarea
Theme
<sa-input-group>
<sa-input-group-input placeholder="Search..."/>
<sa-input-group-addon>
<sa-icon name="search"/>
</sa-input-group-addon>
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">12 results</sa-input-group-addon>
</sa-input-group>
<sa-input-group>
<sa-input-group-input placeholder="example.com" class="!pl-1"/>
<sa-input-group-addon>
<sa-input-group-text>https://</sa-input-group-text>
</sa-input-group-addon>
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
<sa-input-group-button class="rounded-full" size="InputGroupButtonSize.IconExtraSmall" aria-label="More information">
<sa-icon name="info"/>
</sa-input-group-button>
</sa-input-group-addon>
</sa-input-group>
<sa-input-group>
<sa-input-group-textarea placeholder="Ask, Search or Chat..."/>
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.BlockEnd">
<sa-input-group-button
variant="ButtonVariant.Outline"
class="rounded-full"
size="InputGroupButtonSize.IconExtraSmall"
aria-label="Attach file"
>
<sa-icon name="plus"/>
</sa-input-group-button>
<sa-input-group-text class="ml-auto">52% used</sa-input-group-text>
<sa-separator orientation="SeparatorOrientation.Vertical" class="!h-4"/>
<sa-input-group-button
variant="ButtonVariant.Default"
class="rounded-full"
size="InputGroupButtonSize.IconExtraSmall"
>
<sa-icon name="arrow-up"/>
<span class="sr-only">Send</span>
</sa-input-group-button>
</sa-input-group-addon>
</sa-input-group>
<sa-input-group>
<sa-input-group-input placeholder="@@stellaradmin"/>
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
<div class="bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full">
<sa-icon name="check" class="size-3"/>
</div>
</sa-input-group-addon>
</sa-input-group>Usage
Put the input (or textarea) and one or more addons inside <sa-input-group>. The align of each addon decides where it sits.
<sa-input-group>
<!-- 1. Add inputs -->
<sa-input-group-input/>
<!-- or -->
<sa-input-group-textarea/>
<!-- 2. Add addons -->
<sa-input-group-addon align="...">
<!-- you can add text inside the addon... -->
<sa-input-group-text>...</sa-input-group-text>
<!-- ...or buttons -->
<sa-input-group-button>...</sa-input-group-button>
</sa-input-group-addon>
</sa-input-group>Examples
Icons
Display icons inside inputs.
Theme
<sa-input-group>
<sa-input-group-input placeholder="Search..."/>
<sa-input-group-addon>
<sa-icon name="search"/>
</sa-input-group-addon>
</sa-input-group>
<sa-input-group>
<sa-input-group-input type="email" placeholder="Enter your email"/>
<sa-input-group-addon>
<sa-icon name="mail"/>
</sa-input-group-addon>
</sa-input-group>
<sa-input-group>
<sa-input-group-input placeholder="Card number"/>
<sa-input-group-addon>
<sa-icon name="credit-card"/>
</sa-input-group-addon>
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
<sa-icon name="check"/>
</sa-input-group-addon>
</sa-input-group>
<sa-input-group>
<sa-input-group-input placeholder="Card number"/>
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
<sa-icon name="star"/>
<sa-icon name="info"/>
</sa-input-group-addon>
</sa-input-group>Text
Display additional text information alongside inputs.
Theme
<sa-input-group>
<sa-input-group-addon>
<sa-input-group-text>$</sa-input-group-text>
</sa-input-group-addon>
<sa-input-group-input placeholder="0.00"/>
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
<sa-input-group-text>USD</sa-input-group-text>
</sa-input-group-addon>
</sa-input-group>
<sa-input-group>
<sa-input-group-addon>
<sa-input-group-text>https://</sa-input-group-text>
</sa-input-group-addon>
<sa-input-group-input placeholder="example.com" class="pl-0.5"/>
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
<sa-input-group-text>.com</sa-input-group-text>
</sa-input-group-addon>
</sa-input-group>
<sa-input-group>
<sa-input-group-input placeholder="Enter your username"/>
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
<sa-input-group-text>@@voyager.travel</sa-input-group-text>
</sa-input-group-addon>
</sa-input-group>
<sa-input-group>
<sa-input-group-input placeholder="Enter your message"/>
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.BlockEnd">
<sa-input-group-text class="text-muted-foreground text-xs">
120 characters left
</sa-input-group-text>
</sa-input-group-addon>
</sa-input-group>Textarea
Input groups also work with textarea components. Use InputGroupAddOnVariantAlignment.BlockStart or InputGroupAddOnVariantAlignment.BlockEnd for alignment.
Theme
<sa-input-group>
<sa-input-group-textarea
placeholder="Dear Mr Okonkwo, thank you for choosing Voyager Travel..."
class="min-h-[200px]"
/>
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.BlockEnd" class="border-t">
<sa-input-group-text>Draft saved</sa-input-group-text>
<sa-input-group-button size="InputGroupButtonSize.Small" class="ml-auto" variant="ButtonVariant.Default">
Send <sa-icon name="corner-down-left"/>
</sa-input-group-button>
</sa-input-group-addon>
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.BlockStart" class="border-b">
<sa-input-group-text class="font-mono font-medium">
<sa-icon name="file-text" />
welcome-email.txt
</sa-input-group-text>
<sa-input-group-button class="ml-auto" size="InputGroupButtonSize.IconExtraSmall" aria-label="Regenerate">
<sa-icon name="refresh-ccw" />
</sa-input-group-button>
<sa-input-group-button variant="ButtonVariant.Ghost" size="InputGroupButtonSize.IconExtraSmall" aria-label="Copy">
<sa-icon name="copy" />
</sa-input-group-button>
</sa-input-group-addon>
</sa-input-group>Buttons
Add buttons to perform actions within the input group.
Theme
<sa-input-group>
<sa-input-group-input placeholder="https://voyager.travel/trips/VT-48213" readonly/>
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
<sa-input-group-button
aria-label="Copy"
title="Copy"
size="InputGroupButtonSize.IconExtraSmall"
>
<sa-icon name="copy"/>
</sa-input-group-button>
</sa-input-group-addon>
</sa-input-group>
<sa-input-group class="[--radius:9999px]">
<sa-input-group-addon class="text-muted-foreground pl-1.5">
https://
</sa-input-group-addon>
<sa-input-group-input id="input-secure-19"/>
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
<sa-input-group-button
size="InputGroupButtonSize.IconExtraSmall"
aria-label="Favourite"
>
<sa-icon name="star"/>
</sa-input-group-button>
</sa-input-group-addon>
</sa-input-group>
<sa-input-group>
<sa-input-group-input placeholder="Type to search..."/>
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
<sa-input-group-button variant="ButtonVariant.Secondary">Search</sa-input-group-button>
</sa-input-group-addon>
</sa-input-group>Spinner
Show loading indicators while processing input.
Theme
<sa-input-group data-disabled>
<sa-input-group-input placeholder="Searching..." disabled/>
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
<sa-spinner/>
</sa-input-group-addon>
</sa-input-group>
<sa-input-group data-disabled>
<sa-input-group-input placeholder="Processing..." disabled/>
<sa-input-group-addon>
<sa-spinner/>
</sa-input-group-addon>
</sa-input-group>
<sa-input-group data-disabled>
<sa-input-group-input placeholder="Saving changes..." disabled/>
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
<sa-input-group-text>Saving...</sa-input-group-text>
<sa-spinner/>
</sa-input-group-addon>
</sa-input-group>
<sa-input-group data-disabled>
<sa-input-group-input placeholder="Refreshing data..." disabled/>
<sa-input-group-addon>
<sa-icon name="loader" class="animate-spin"/>
</sa-input-group-addon>
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
<sa-input-group-text class="text-muted-foreground">
Please wait...
</sa-input-group-text>
</sa-input-group-addon>
</sa-input-group>Label
Add labels within input groups to improve accessibility.
Theme
<sa-input-group>
<sa-input-group-input id="email" placeholder="ibn.battuta@rihlah.travel" />
<sa-input-group-addon>
<sa-label for="email">@@</sa-label>
</sa-input-group-addon>
</sa-input-group>
<sa-input-group>
<sa-input-group-input id="email-2" placeholder="ibn.battuta@rihlah.travel" />
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.BlockStart">
<sa-label for="email-2" class="text-foreground">
Email
</sa-label>
<sa-input-group-button
variant="ButtonVariant.Ghost"
aria-label="Help"
class="ml-auto rounded-full"
size="InputGroupButtonSize.IconExtraSmall"
>
<sa-icon name="info" />
</sa-input-group-button>
</sa-input-group-addon>
</sa-input-group>Button group
Wrap input groups with button groups to create prefixes and suffixes.
Theme
<sa-button-group>
<sa-button-group-text>
<sa-label for="url">https://</sa-label>
</sa-button-group-text>
<sa-input-group>
<sa-input-group-input id="url"/>
<sa-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
<sa-icon name="link-2"/>
</sa-input-group-addon>
</sa-input-group>
<sa-button-group-text>.com</sa-button-group-text>
</sa-button-group>API Reference
<sa-input-group>
Renders a <div> element with role="group" that wraps the input and its add-ons.
<sa-input-group-input>
Renders an <input> element styled for use inside an input group.
Prop
Type
<sa-input-group-textarea>
Renders a <textarea> element styled for use inside an input group.
Prop
Type
<sa-input-group-addon>
Renders a <div> element with role="group" that holds text, icons, or buttons alongside the input.
Prop
Type
<sa-input-group-text>
Renders a <span> element for displaying text inside an add-on.
<sa-input-group-button>
Renders a <button> element sized for use inside an add-on.
Prop
Type