bearnie

Input Group

Add addons, buttons, and helper content to inputs.

Installation

npx bearnie add input-group
npx bearnie add input-group

Usage

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/bearnie"
<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon align="inline-start">
    <HugeIcon icon={Search01Icon} 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.

inline-end

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

block-start

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

Message

block-end

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

0/280

Examples

Icon

Text

https://
USD

Button

Kbd

⌘K

Spinner

Multiple addons

USD

Clearable input

Textarea with actions

Add a comment

Markdown supported

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, PlusSignIcon:

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, PlusSignIcon:

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