Input Group | Bearnie

<InputGroup>
<InputGroupInput placeholder="Search..." />
<InputGroupAddon align="inline-start">
  <Search class="size-4" />
</InputGroupAddon>
</InputGroup>

Installation

npx bearnie add input-group

import InputGroup from "@/components/ui/input-group/InputGroup.astro";
import InputGroupAddon from "@/components/ui/input-group/InputGroupAddon.astro";
import InputGroupButton from "@/components/ui/input-group/InputGroupButton.astro";
import InputGroupInput from "@/components/ui/input-group/InputGroupInput.astro";
import InputGroupText from "@/components/ui/input-group/InputGroupText.astro";
import InputGroupTextarea from "@/components/ui/input-group/InputGroupTextarea.astro";

Usage

import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
InputGroupText,
InputGroupTextarea,
} from "@/components/ui"

<InputGroup>
<InputGroupInput placeholder="Search..." />
<InputGroupAddon align="inline-start">
  <Search class="size-4" />
</InputGroupAddon>
</InputGroup>

Align

Use the align prop on InputGroupAddon to position the addon relative to the input.

For proper focus management, InputGroupAddon should always be placed after InputGroupInput or InputGroupTextarea in the DOM. Use the align prop to visually position the addon.

inline-start

Use align="inline-start" to position the addon at the start of the input. This is the default.

<InputGroup>
<InputGroupInput placeholder="Search..." />
<InputGroupAddon align="inline-start">
  <Search class="size-4" />
</InputGroupAddon>
</InputGroup>

inline-end

Use align="inline-end" to position the addon at the end of the input.

<InputGroup>
<InputGroupInput type="password" placeholder="Enter password" />
<InputGroupAddon align="inline-end">
  <Eye class="size-4" />
</InputGroupAddon>
</InputGroup>

block-start

Use align="block-start" to position the addon above the input. Use layout="block" on InputGroup for vertical layouts.

Message

<InputGroup layout="block">
<InputGroupTextarea placeholder="Enter your message..." rows={3} />
<InputGroupAddon align="block-start" class="text-xs font-medium">
  Message
</InputGroupAddon>
</InputGroup>

block-end

Use align="block-end" to position the addon below the input.

0/280

<InputGroup layout="block">
<InputGroupTextarea placeholder="Write a comment..." rows={3} />
<InputGroupAddon align="block-end" class="justify-between">
  <span class="text-xs">0/280</span>
  <InputGroupButton variant="default" size="sm">Post</InputGroupButton>
</InputGroupAddon>
</InputGroup>

Examples

Icon

<div class="flex flex-col gap-4 w-full max-w-sm">
<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon align="inline-start">
    <Search class="size-4" />
  </InputGroupAddon>
</InputGroup>
<InputGroup>
  <InputGroupInput type="email" placeholder="Email" />
  <InputGroupAddon align="inline-start">
    <Mail class="size-4" />
  </InputGroupAddon>
</InputGroup>
<InputGroup>
  <InputGroupInput type="password" placeholder="Password" />
  <InputGroupAddon align="inline-start">
    <Lock class="size-4" />
  </InputGroupAddon>
</InputGroup>
</div>

Text

https://

USD

<div class="flex flex-col gap-4 w-full max-w-sm">
<InputGroup>
  <InputGroupInput placeholder="lexingtonthemes.com" />
  <InputGroupAddon align="inline-start">
    <InputGroupText>https://</InputGroupText>
  </InputGroupAddon>
</InputGroup>
<InputGroup>
  <InputGroupInput placeholder="Enter amount" />
  <InputGroupAddon align="inline-end">
    <InputGroupText>USD</InputGroupText>
  </InputGroupAddon>
</InputGroup>
</div>

Button

<div class="flex flex-col gap-4 w-full max-w-sm">
<InputGroup>
  <InputGroupInput placeholder="Enter text to copy..." />
  <InputGroupAddon align="inline-end">
    <InputGroupButton size="icon-xs" aria-label="Copy">
      <Copy class="size-3.5" />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>
<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon align="inline-end">
    <InputGroupButton size="xs">Search</InputGroupButton>
  </InputGroupAddon>
</InputGroup>
</div>

Kbd

⌘K

<InputGroup>
<InputGroupInput placeholder="Search documentation..." />
<InputGroupAddon align="inline-end">
  <kbd class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
    <span class="text-xs">⌘</span>K
  </kbd>
</InputGroupAddon>
</InputGroup>

Spinner

<div class="flex flex-col gap-4 w-full max-w-sm">
<InputGroup>
  <InputGroupInput placeholder="Loading..." />
  <InputGroupAddon align="inline-end">
    <Spinner size="sm" />
  </InputGroupAddon>
</InputGroup>
<InputGroup>
  <InputGroupInput placeholder="Validating..." />
  <InputGroupAddon align="inline-start">
    <Spinner size="sm" />
  </InputGroupAddon>
</InputGroup>
</div>

Multiple addons

USD

<InputGroup>
<InputGroupInput placeholder="0.00" />
<InputGroupAddon align="inline-start">
  <DollarSign class="size-4" />
</InputGroupAddon>
<InputGroupAddon align="inline-end">
  <InputGroupText>USD</InputGroupText>
</InputGroupAddon>
</InputGroup>

Clearable input

<InputGroup>
<InputGroupInput placeholder="Type something..." value="Hello World" />
<InputGroupAddon align="inline-end">
  <InputGroupButton size="icon-xs" aria-label="Clear">
    <X class="size-3.5" />
  </InputGroupButton>
</InputGroupAddon>
</InputGroup>

Textarea with actions

<InputGroup layout="block">
<InputGroupTextarea placeholder="Write your message..." rows={4} />
<InputGroupAddon align="block-end" class="justify-end gap-2">
  <InputGroupButton variant="ghost" size="sm">Cancel</InputGroupButton>
  <InputGroupButton variant="default" size="sm">
    <Send class="size-3.5 mr-1" />
    Send
  </InputGroupButton>
</InputGroupAddon>
</InputGroup>

Textarea with header and footer

Add a comment

Markdown supported

<InputGroup layout="block">
<InputGroupTextarea placeholder="Write your comment..." rows={3} />
<InputGroupAddon align="block-start" class="font-medium text-sm">
  Add a comment
</InputGroupAddon>
<InputGroupAddon align="block-end" class="justify-between">
  <span class="text-xs">Markdown supported</span>
  <InputGroupButton variant="default" size="sm">Submit</InputGroupButton>
</InputGroupAddon>
</InputGroup>

Anatomy

InputGroup - The main container with unified focus handling
InputGroupAddon - Positions icons, text, or buttons relative to the input
InputGroupButton - Small button optimized for input groups
InputGroupInput - Styled input with focus state handling
InputGroupText - Static text display (e.g., “https://”, currency symbols)
InputGroupTextarea - Styled textarea with focus state handling

Props

InputGroup

Prop	Type	Default	Description
layout	inline \| block	inline	Layout direction (inline for inputs, block for textareas)
class	string	-	Additional CSS classes

InputGroupAddon

Prop	Type	Default	Description
align	inline-start \| inline-end \| block-start \| block-end	inline-start	Position relative to input
class	string	-	Additional CSS classes

For InputGroupInput, use inline-start or inline-end alignment. For InputGroupTextarea, use block-start or block-end alignment.

InputGroupButton

Prop	Type	Default	Description
size	xs \| sm \| icon-xs \| icon-sm	xs	Button size
variant	default \| destructive \| outline \| secondary \| ghost \| link	ghost	Button variant
disabled	boolean	false	Disabled state
type	button \| submit \| reset	button	Button type
class	string	-	Additional CSS classes

InputGroupInput

All standard input props are supported, plus:

Prop	Type	Default	Description
type	text \| email \| password \| search \| tel \| url \| number	text	Input type
placeholder	string	-	Placeholder text
disabled	boolean	false	Disabled state
class	string	-	Additional CSS classes

InputGroupTextarea

All standard textarea props are supported, plus:

Prop	Type	Default	Description
placeholder	string	-	Placeholder text
rows	number	4	Number of visible rows
disabled	boolean	false	Disabled state
class	string	-	Additional CSS classes

InputGroupText

Prop	Type	Default	Description
class	string	-	Additional CSS classes