Input Group

Add addons, buttons, and helper content to inputs.

12 results

import { MagnifyingGlassIcon } from "@phosphor-icons/react"

import {

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/input-group.json

Usage

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

<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

Composition

Use the following composition to build an InputGroup:

InputGroup
├── InputGroupInput or InputGroupTextarea
├── InputGroupAddon
├── InputGroupButton
└── InputGroupText

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.

import { MagnifyingGlassIcon } from "@phosphor-icons/react"

import {

inline-end

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

import { EyeSlashIcon } from "@phosphor-icons/react"

import {

block-start

Use align="block-start" to position the addon above the input.

import { CodeIcon, CopyIcon } from "@phosphor-icons/react"

import {

block-end

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

import {
  Field,
  FieldDescription,

Icon

import { CheckIcon, CreditCardIcon, EnvelopeIcon, InfoIcon, MagnifyingGlassIcon, StarIcon } from "@phosphor-icons/react"

import {

Text

USD

https://

.com

@company.com

120 characters left

import {
  InputGroup,
  InputGroupAddon,

Button

https://

"use client"

import * as React from "react"

Kbd

⌘K

import { MagnifyingGlassIcon } from "@phosphor-icons/react"

import {

"use client"

import { CaretDownIcon, DotsThreeOutlineIcon } from "@phosphor-icons/react"

Spinner

Saving...

Please wait...

import { SpinnerIcon } from "@phosphor-icons/react"

import {

Textarea

Line 1, Column 1

script.js

import { ArrowClockwiseIcon, ArrowElbowDownLeftIcon, CodeIcon, CopyIcon } from "@phosphor-icons/react"

import {

Custom Input

Add the data-slot="input-group-control" attribute to your custom input for automatic focus state handling.

Here's an example of a custom resizable textarea from a third-party library.

"use client"

import TextareaAutosize from "react-textarea-autosize"

RTL

To enable RTL support, see the RTL configuration guide.

١٢ نتيجة

جاري الحفظ...

"use client"

import * as React from "react"

API Reference

InputGroup

The main component that wraps inputs and addons.

Prop	Type	Default
`className`	`string`

<InputGroup>
  <InputGroupInput />
  <InputGroupAddon />
</InputGroup>

InputGroupAddon

Displays icons, text, buttons, or other content alongside inputs.

Focus Navigation

For proper focus navigation, the InputGroupAddon component should be placed after the input. Set the align prop to position the addon.

Prop	Type	Default
`align`	`"inline-start" \| "inline-end" \| "block-start" \| "block-end"`	`"inline-start"`
`className`	`string`

<InputGroupAddon align="inline-end">
  <SearchIcon />
</InputGroupAddon>

For <InputGroupInput />, use the inline-start or inline-end alignment. For <InputGroupTextarea />, use the block-start or block-end alignment.

The InputGroupAddon component can have multiple InputGroupButton components and icons.

<InputGroupAddon>
  <InputGroupButton>Button</InputGroupButton>
  <InputGroupButton>Button</InputGroupButton>
</InputGroupAddon>

InputGroupButton

Displays buttons within input groups.

Prop	Type	Default
`size`	`"xs" \| "icon-xs" \| "sm" \| "icon-sm"`	`"xs"`
`variant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	`"ghost"`
`className`	`string`

<InputGroupButton>Button</InputGroupButton>
<InputGroupButton size="icon-xs" aria-label="Copy">
  <CopyIcon />
</InputGroupButton>

InputGroupInput

Replacement for <Input /> when building input groups. This component has the input group styles pre-applied and uses the unified data-slot="input-group-control" for focus state handling.

Prop	Type	Default
`className`	`string`

All other props are passed through to the underlying <Input /> component.

<InputGroup>
  <InputGroupInput placeholder="Enter text..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

InputGroupTextarea

Replacement for <Textarea /> when building input groups. This component has the textarea group styles pre-applied and uses the unified data-slot="input-group-control" for focus state handling.

Prop	Type	Default
`className`	`string`

All other props are passed through to the underlying <Textarea /> component.

<InputGroup>
  <InputGroupTextarea placeholder="Enter message..." />
  <InputGroupAddon align="block-end">
    <InputGroupButton>Send</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Input Input OTP