StellarAdmin

Input Group

Display additional information or actions to an input or textarea.

<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">
      <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"
    >
      <sa-icon name="plus"/>
    </sa-input-group-button>
    <sa-input-group-text class="ml-auto">52% used</sa-input-group-text>
    <sa-separator orientation="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

<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-addon>
</sa-input-group>

Examples

Icons

Display icons inside inputs.

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

<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>@@company.com</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.

<sa-input-group>
    <sa-input-group-textarea
        placeholder="console.log('Hello, world!');"
        class="min-h-[200px]"
    />
    <sa-input-group-addon align="InputGroupAddOnVariantAlignment.BlockEnd" class="border-t">
        <sa-input-group-text>Line 1, Column 1</sa-input-group-text>
        <sa-input-group-button size="InputGroupButtonSize.Small" class="ml-auto" variant="ButtonVariant.Default">
            Run <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-braces-corner" />
            script.js
        </sa-input-group-text>
        <sa-input-group-button class="ml-auto" size="InputGroupButtonSize.IconExtraSmall">
            <sa-icon name="refresh-ccw" />
        </sa-input-group-button>
        <sa-input-group-button variant="ButtonVariant.Ghost" size="InputGroupButtonSize.IconExtraSmall">
            <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.

<sa-input-group>
    <sa-input-group-input placeholder="https://x.com/shadcn" 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"
        >
            <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.

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

<sa-input-group>
    <sa-input-group-input id="email" placeholder="stellaradmin" />
    <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.

<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>

Input

Previous Page

Link Button

Next Page

On this page

UsageExamplesIconsTextTextareaButtonsSpinnerLabelButton Group