║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Input Group description: A flexible component for grouping inputs with addons, buttons, and other elements.

<ComponentPreview name="input-group-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Installation

<CodeTabs> <TabsList> <TabsTab value="cli">CLI</TabsTab> <TabsTab value="manual">Manual</TabsTab> </TabsList> <TabsPanel value="cli">

npx shadcn@latest add @coss/input-group

</TabsPanel> <TabsPanel value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

npm install @base-ui-components/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="input-group" title="components/ui/input-group.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsPanel> </CodeTabs>

Usage

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

<InputGroup>
  <InputGroupInput type="email" placeholder="Email" />
  <InputGroupAddon>
    <MailIcon />
  </InputGroupAddon>
</InputGroup>

Examples

With End Icon

<ComponentPreview name="input-group-with-end-icon" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Start Text

<ComponentPreview name="input-group-with-start-text" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With End Text

<ComponentPreview name="input-group-with-end-text" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Start and End Text

<ComponentPreview name="input-group-with-start-end-text" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Number Field

<ComponentPreview name="input-group-with-number-field" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Tooltip

<ComponentPreview name="input-group-with-end-tooltip" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Icon Button

<ComponentPreview name="input-group-with-icon-button" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Button

<ComponentPreview name="input-group-with-button" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Badge

<ComponentPreview name="input-group-with-badge" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Keyboard Shortcut

<ComponentPreview name="input-group-with-kbd" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Inner Label

<ComponentPreview name="input-group-with-inner-label" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Small Size

<ComponentPreview name="input-group-sm" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Large Size

<ComponentPreview name="input-group-lg" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Disabled

<ComponentPreview name="input-group-disabled" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Loading

<ComponentPreview name="input-group-loading" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Textarea

<ComponentPreview name="input-group-textarea" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-80" />

API Reference

InputGroup

The main component that wraps inputs and addons.

| Prop | Type | Description | | ----------- | ----------------------------- | ------------------------------------------------ | | className | string | Additional CSS classes to apply to the component | | ...props | React.ComponentProps<'div'> | All standard div attributes are supported |

InputGroupAddon

A container for addons like icons, text, buttons, and other elements. Can be positioned at the start or end (inline), or top or bottom (block) of the input.

| Prop | Type | Default | Description | | ----------- | ----------------------------------------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | align | 'inline-start' \| 'inline-end' \| 'block-start' \| 'block-end' | 'inline-start' | The position of the addon relative to the input. Use inline-start or inline-end for inputs, and block-start or block-end for textareas | | className | string | | Additional CSS classes to apply to the component | | ...props | React.ComponentProps<'div'> | | All standard div attributes are supported |

<Alert className="bg-muted/24"> <InfoIcon /> <AlertDescription> For proper focus navigation, the `InputGroupAddon` component should be placed after the input in the DOM order. </AlertDescription> </Alert>

InputGroupText

A text container component for displaying text content within an InputGroupAddon. Automatically styles text with muted foreground color and handles icon sizing.

| Prop | Type | Description | | ----------- | ------------------------------ | ------------------------------------------------ | | className | string | Additional CSS classes to apply to the component | | ...props | React.ComponentProps<'span'> | All standard span attributes are supported |

InputGroupInput

A specialized input component for use within InputGroup. It's essentially an unstyled Input component that inherits styling from the parent InputGroup.

| Prop | Type | Description | | ----------- | ------------ | ----------------------------------------------------------------------------------------------------- | | className | string | Additional CSS classes to apply to the component | | ...props | InputProps | All props from the Input component are supported, including type, placeholder, disabled, etc. |

InputGroupTextarea

A specialized textarea component for use within InputGroup. It's essentially an unstyled Textarea component that inherits styling from the parent InputGroup.

| Prop | Type | Description | | ----------- | --------------- | -------------------------------------------------------------------------------------------------------- | | className | string | Additional CSS classes to apply to the component | | ...props | TextareaProps | All props from the Textarea component are supported, including placeholder, disabled, rows, etc. |

Comparing with shadcn

If you're already familiar with shadcn/ui, this guide highlights the small differences and similarities so you can get started with coss ui quickly.

Quick Checklist

• No InputGroupButton component - use the regular Button component directly inside InputGroupAddon instead
• To disable an input group, disable the InputGroupInput or InputGroupTextarea directly (and any Button inside it) - no need to add a data-disabled attribute on InputGroup.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║