Input Group

import Search from "@material-symbols/svg-400/rounded/search.svg?react"

import {

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui/input-group
Copy

Usage#

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

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

Composition#

Use the following composition to build an InputGroup:

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

Align#

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

inline-start#

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

import SearchIcon from "@material-symbols/svg-400/rounded/search.svg?react"

import {

inline-end#

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

import EyeOffIcon from "@material-symbols/svg-400/rounded/visibility_off.svg?react"

import {

block-start#

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

import CopyIcon from "@material-symbols/svg-400/rounded/content_copy.svg?react"
import FileCodeIcon from "@material-symbols/svg-400/rounded/code.svg?react"

block-end#

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

import {
  Field,
  FieldDescription,

Icon#

import CheckIcon from "@material-symbols/svg-400/rounded/check.svg?react"
import CreditCardIcon from "@material-symbols/svg-400/rounded/credit_card.svg?react"
import InfoIcon from "@material-symbols/svg-400/rounded/info.svg?react"

Text#

import {
  InputGroup,
  InputGroupAddon,

Button#

"use client"

import * as React from "react"

Kbd#

import SearchIcon from "@material-symbols/svg-400/rounded/search.svg?react"

import {

Dropdown#

"use client"

import ChevronDownIcon from "@material-symbols/svg-400/rounded/keyboard_arrow_down.svg?react"

Spinner#

import LoaderIcon from "@material-symbols/svg-400/rounded/progress_activity.svg?react"

import {

Textarea#

import IconBrandJavascript from "@material-symbols/svg-400/rounded/javascript.svg?react"
import IconCopy from "@material-symbols/svg-400/rounded/content_copy.svg?react"
import IconCornerDownLeft from "@material-symbols/svg-400/rounded/keyboard_return.svg?react"

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"

Variants#

Use the variant prop to match standalone Input variants.

import {
  InputGroup,
  InputGroupInput,

RTL#

To enable RTL support in Force UI, see the RTL configuration guide.

"use client"

import * as React from "react"

API Reference#

InputGroup#

The main component that wraps inputs and addons.

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

InputGroupAddon#

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

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

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

InputGroupButton#

Displays buttons within input groups.

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

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

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

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

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