- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle
- Toggle Group
- Tooltip
- Typography
import { SearchIcon } from "lucide-react";
import {
InputGroup,
InputGroupAddon,
InputGroupInput,Installation
$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.com/r/input-group.json
Usage
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
InputGroupText,
InputGroupTextarea,
} from "@/components/ui/input-group/input-group";<InputGroup>
<InputGroupInput placeholder="Search..." />
<InputGroupAddon>
<SearchIcon />
</InputGroupAddon>
</InputGroup>Composition
The InputGroupAddon component should be placed after the input. Use the
align prop to position the addon.
InputGroup
├── InputGroupInput / InputGroupTextarea
└── InputGroupAddon
├── InputGroupText
└── InputGroupButtonAlign
Use the align prop on InputGroupAddon to position content. For
InputGroupInput, use inline-start or inline-end. For
InputGroupTextarea, use block-start or block-end.
inline-start
Icon positioned at the start.
import { SearchIcon } from "lucide-react";
import {
Field,
FieldDescription,
FieldLabel,inline-end
Icon positioned at the end.
import { EyeOffIcon } from "lucide-react";
import {
Field,
FieldDescription,
FieldLabel,block-start
Header positioned above the input.
Header positioned above the textarea.
import { CopyIcon, FileCodeIcon } from "lucide-react";
import {
Field,
FieldDescription,
FieldGroup,block-end
Footer positioned below the input.
Footer positioned below the textarea.
import {
Field,
FieldDescription,
FieldGroup,
FieldLabel,
} from "@/components/ui/field";Examples
Icon
import {
CheckIcon,
CreditCardIcon,
InfoIcon,
MailIcon,
SearchIcon,Text
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
InputGroupText,
InputGroupTextarea,Button
"use client";
import { CheckIcon, CopyIcon, StarIcon } from "lucide-react";
import { useState } from "react";
import {Kbd
import { SearchIcon } from "lucide-react";
import {
InputGroup,
InputGroupAddon,
InputGroupInput,Dropdown
"use client";
import { ChevronDownIcon, MoreHorizontalIcon } from "lucide-react";
import {
DropdownMenu,Spinner
import { LoaderIcon } from "lucide-react";
import {
InputGroup,
InputGroupAddon,
InputGroupInput,Textarea
import {
CopyIcon,
CornerDownLeftIcon,
FileCodeIcon,
RefreshCwIcon,
} from "lucide-react";Custom Input
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupTextarea,
} from "@/components/ui/input-group";RTL
To enable right-to-left support, see the RTL guide.
"use client";
import { SearchIcon } from "lucide-react";
import { useTranslation } from "@/components/language-selector";
import type { Translations } from "@/components/language-selector";API Reference
InputGroup
The main component that wraps inputs and addons.
| Prop | Type | Default |
|---|---|---|
className | string | - |
InputGroupAddon
Displays icons, text, buttons, or other content alongside inputs. For proper
focus navigation, place it after the input and use the align prop to position
it.
| Prop | Type | Default |
|---|---|---|
align | "inline-start" | "inline-end" | "block-start" | "block-end" | "inline-start" |
className | string | - |
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 | - |
InputGroupInput
Replacement for <Input /> when building input groups. Uses the unified
data-slot="input-group-control" for focus state handling.
| Prop | Type | Default |
|---|---|---|
className | string | - |
InputGroupTextarea
Replacement for <Textarea /> when building input groups. Uses the unified
data-slot="input-group-control" for focus state handling.
| Prop | Type | Default |
|---|---|---|
className | string | - |