Input Group · paneui

⌘K

https://

Installation

pnpm dlx shadcn@latest add @paneui/input-group

Usage

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group"

<InputGroup>
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search" />
  <InputGroupAddon align="inline-end">
    <InputGroupButton>Go</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Composition

InputGroup
├── InputGroupAddon (inline-start | inline-end | block-start | block-end)
│   ├── InputGroupText
│   └── InputGroupButton
└── InputGroupInput  (or InputGroupTextarea)

Examples

Textarea

Use for prompts that need room for longer text.

Sizes

RTL

Behaviour

The group draws the well and the focus ring; the input inside is bare. Clicking an addon (not its buttons) focuses the input. Buttons inside are concentric with the well at every size.

API Reference

InputGroup

Also accepts every prop of div.

size= "default": "xs" | "sm" | "default" | "lg"; Height (24 / 28 / 32 / 36px); also sizes buttons inside. Follows a sized Field.

Prop	Type	Default	Description
size	"xs" \| "sm" \| "default" \| "lg"	"default"	Height (24 / 28 / 32 / 36px); also sizes buttons inside. Follows a sized `Field`.

InputGroupAddon

Also accepts every prop of div.

align= "inline-start": "inline-start" | "inline-end" | "block-start" | "block-end"; Where the addon sits. Block addons make the group a column.

Prop	Type	Default	Description
align	"inline-start" \| "inline-end" \| "block-start" \| "block-end"	"inline-start"	Where the addon sits. Block addons make the group a column.

InputGroupButton

Also accepts every prop of Button.

variant= "ghost": Button variant
size= "xs": Button size; Use icon-xs for an icon-only button.

Prop	Type	Default	Description
variant	Button variant	"ghost"
size	Button size	"xs"	Use `icon-xs` for an icon-only button.

InputGroupInput

Also accepts every prop of input.

InputGroupTextarea

Grows with its content. Also accepts every prop of textarea.

InputGroupText

Also accepts every prop of span.