12 resultshttps://Auto52% usedSend

import { IconCheck, IconInfoCircle, IconPlus } from "@tabler/icons-react"
import { ArrowUpIcon, Search } from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea,
} from "@/components/ui/input-group"
import { Separator } from "@/components/ui/separator"
import { Tooltip, TooltipContent, TooltipTrigger,
} from "@/components/ui/tooltip"
export function InputGroupDemo() { return ( <div className="grid w-full max-w-sm gap-6"> <InputGroup> <InputGroupInput placeholder="Search..." /> <InputGroupAddon> <Search /> </InputGroupAddon> <InputGroupAddon align="inline-end">12 results</InputGroupAddon> </InputGroup> <InputGroup> <InputGroupInput placeholder="example.com" className="!pl-1" /> <InputGroupAddon> <InputGroupText>https://</InputGroupText> </InputGroupAddon> <InputGroupAddon align="inline-end"> <Tooltip> <TooltipTrigger asChild> <InputGroupButton className="rounded-full" size="icon-xs"> <IconInfoCircle /> </InputGroupButton> </TooltipTrigger> <TooltipContent>This is content in a tooltip.</TooltipContent> </Tooltip> </InputGroupAddon> </InputGroup> <InputGroup> <InputGroupTextarea placeholder="Ask, Search or Chat..." /> <InputGroupAddon align="block-end"> <InputGroupButton variant="outline" className="rounded-full" size="icon-xs" > <IconPlus /> </InputGroupButton> <DropdownMenu> <DropdownMenuTrigger asChild> <InputGroupButton variant="ghost">Auto</InputGroupButton> </DropdownMenuTrigger> <DropdownMenuContent side="top" align="start" className="[--radius:0.95rem]" > <DropdownMenuItem>Auto</DropdownMenuItem> <DropdownMenuItem>Agent</DropdownMenuItem> <DropdownMenuItem>Manual</DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> <InputGroupText className="ml-auto">52% used</InputGroupText> <Separator orientation="vertical" className="!h-4" /> <InputGroupButton variant="default" className="rounded-full" size="icon-xs" disabled > <ArrowUpIcon /> <span className="sr-only">Send</span> </InputGroupButton> </InputGroupAddon> </InputGroup> <InputGroup> <InputGroupInput placeholder="@shadcn" /> <InputGroupAddon align="inline-end"> <div className="bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full"> <IconCheck className="size-3" /> </div> </InputGroupAddon> </InputGroup> </div> )
}
``` ## Installation [CLI](#)[Manual](#)
```tsx
[pnpm](#)[npm](#)[yarn](#)[bun](#)pnpm dlx shadcn@latest add input-group
``` ## Usage ```tsx
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea,
} from "@/components/ui/input-group"
``` ```tsx
<InputGroup> <InputGroupInput placeholder="Search..." /> <InputGroupAddon> <SearchIcon /> </InputGroupAddon> <InputGroupAddon align="inline-end"> <InputGroupButton>Search</InputGroupButton> </InputGroupAddon>
</InputGroup>
``` ## Examples ### Icon { #icon } ```tsx
import { CheckIcon, CreditCardIcon, InfoIcon, MailIcon, SearchIcon, StarIcon,
} from "lucide-react"
import { InputGroup, InputGroupAddon, InputGroupInput,
} from "@/components/ui/input-group"
export function InputGroupIcon() { return ( <div className="grid w-full max-w-sm gap-6"> <InputGroup> <InputGroupInput placeholder="Search..." /> <InputGroupAddon> <SearchIcon /> </InputGroupAddon> </InputGroup> <InputGroup> <InputGroupInput type="email" placeholder="Enter your email" /> <InputGroupAddon> <MailIcon /> </InputGroupAddon> </InputGroup> <InputGroup> <InputGroupInput placeholder="Card number" /> <InputGroupAddon> <CreditCardIcon /> </InputGroupAddon> <InputGroupAddon align="inline-end"> <CheckIcon /> </InputGroupAddon> </InputGroup> <InputGroup> <InputGroupInput placeholder="Card number" /> <InputGroupAddon align="inline-end"> <StarIcon /> <InfoIcon /> </InputGroupAddon> </InputGroup> </div> )
}
``` ### Text { #text } Display additional text information alongside inputs. $USDhttps://.com@company.com120 characters left
```tsx
import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea,
} from "@/components/ui/input-group"
export function InputGroupTextExample() { return ( <div className="grid w-full max-w-sm gap-6"> <InputGroup> <InputGroupAddon> <InputGroupText>$</InputGroupText> </InputGroupAddon> <InputGroupInput placeholder="0.00" /> <InputGroupAddon align="inline-end"> <InputGroupText>USD</InputGroupText> </InputGroupAddon> </InputGroup> <InputGroup> <InputGroupAddon> <InputGroupText>https://</InputGroupText> </InputGroupAddon> <InputGroupInput placeholder="example.com" className="!pl-0.5" /> <InputGroupAddon align="inline-end"> <InputGroupText>.com</InputGroupText> </InputGroupAddon> </InputGroup> <InputGroup> <InputGroupInput placeholder="Enter your username" /> <InputGroupAddon align="inline-end"> <InputGroupText>@company.com</InputGroupText> </InputGroupAddon> </InputGroup> <InputGroup> <InputGroupTextarea placeholder="Enter your message" /> <InputGroupAddon align="block-end"> <InputGroupText className="text-muted-foreground text-xs"> 120 characters left </InputGroupText> </InputGroupAddon> </InputGroup> </div> )
}
``` ### Button { #button } Add buttons to perform actions within the input group. https://[Search](#)
```tsx
"use client"
import * as React from "react"
import { IconCheck, IconCopy, IconInfoCircle, IconStar,
} from "@tabler/icons-react"
import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput,
} from "@/components/ui/input-group"
import { Popover, PopoverContent, PopoverTrigger,
} from "@/components/ui/popover"
export function InputGroupButtonExample() { const { copyToClipboard, isCopied } = useCopyToClipboard() const [isFavorite, setIsFavorite] = React.useState(false) return ( <div className="grid w-full max-w-sm gap-6"> <InputGroup> <InputGroupInput placeholder="https://x.com/shadcn" readOnly /> <InputGroupAddon align="inline-end"> <InputGroupButton aria-label="Copy" title="Copy" size="icon-xs" onClick={() => { copyToClipboard("https://x.com/shadcn") }} > {isCopied ? <IconCheck /> : <IconCopy />} </InputGroupButton> </InputGroupAddon> </InputGroup> <InputGroup className="[--radius:9999px]"> <Popover> <PopoverTrigger asChild> <InputGroupAddon> <InputGroupButton variant="secondary" size="icon-xs"> <IconInfoCircle /> </InputGroupButton> </InputGroupAddon> </PopoverTrigger> <PopoverContent align="start" className="flex flex-col gap-1 rounded-xl text-sm" > <p className="font-medium">Your connection is not secure.</p> <p>You should not enter any sensitive information on this site.</p> </PopoverContent> </Popover> <InputGroupAddon className="text-muted-foreground pl-1.5"> https:// </InputGroupAddon> <InputGroupInput id="input-secure-19" /> <InputGroupAddon align="inline-end"> <InputGroupButton onClick={() => setIsFavorite(!isFavorite)} size="icon-xs" > <IconStar data-favorite={isFavorite} className="data-[favorite=true]:fill-blue-600 data-[favorite=true]:stroke-blue-600" /> </InputGroupButton> </InputGroupAddon> </InputGroup> <InputGroup> <InputGroupInput placeholder="Type to search..." /> <InputGroupAddon align="inline-end"> <InputGroupButton variant="secondary">Search</InputGroupButton> </InputGroupAddon> </InputGroup> </div> )
}
``` ### Tooltip { #tooltip } Add tooltips to provide additional context or help. ```tsx
import { HelpCircle, InfoIcon } from "lucide-react"
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput,
} from "@/components/ui/input-group"
import { Tooltip, TooltipContent, TooltipTrigger,
} from "@/components/ui/tooltip"
export function InputGroupTooltip() { return ( <div className="grid w-full max-w-sm gap-4"> <InputGroup> <InputGroupInput placeholder="Enter password" type="password" /> <InputGroupAddon align="inline-end"> <Tooltip> <TooltipTrigger asChild> <InputGroupButton variant="ghost" aria-label="Info" size="icon-xs" > <InfoIcon /> </InputGroupButton> </TooltipTrigger> <TooltipContent> <p>Password must be at least 8 characters</p> </TooltipContent> </Tooltip> </InputGroupAddon> </InputGroup> <InputGroup> <InputGroupInput placeholder="Your email address" /> <InputGroupAddon align="inline-end"> <Tooltip> <TooltipTrigger asChild> <InputGroupButton variant="ghost" aria-label="Help" size="icon-xs" > <HelpCircle /> </InputGroupButton> </TooltipTrigger> <TooltipContent> <p>We'll use this to send you notifications</p> </TooltipContent> </Tooltip> </InputGroupAddon> </InputGroup> <InputGroup> <InputGroupInput placeholder="Enter API key" /> <Tooltip> <TooltipTrigger asChild> <InputGroupAddon> <InputGroupButton variant="ghost" aria-label="Help" size="icon-xs" > <HelpCircle /> </InputGroupButton> </InputGroupAddon> </TooltipTrigger> <TooltipContent side="left"> <p>Click for help with API keys</p> </TooltipContent> </Tooltip> </InputGroup> </div> )
}
``` ### Textarea { #textarea } Input groups also work with textarea components. Use block-start or block-end for alignment. Line 1, Column 1[Run](#)script.js
```tsx
import { IconBrandJavascript, IconCopy, IconCornerDownLeft, IconRefresh,
} from "@tabler/icons-react"
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupTextarea,
} from "@/components/ui/input-group"
export function InputGroupTextareaExample() { return ( <div className="grid w-full max-w-md gap-4"> <InputGroup> <InputGroupTextarea id="textarea-code-32" placeholder="console.log('Hello, world!');" className="min-h-[200px]" /> <InputGroupAddon align="block-end" className="border-t"> <InputGroupText>Line 1, Column 1</InputGroupText> <InputGroupButton size="sm" className="ml-auto" variant="default"> Run <IconCornerDownLeft /> </InputGroupButton> </InputGroupAddon> <InputGroupAddon align="block-start" className="border-b"> <InputGroupText className="font-mono font-medium"> <IconBrandJavascript /> script.js </InputGroupText> <InputGroupButton className="ml-auto" size="icon-xs"> <IconRefresh /> </InputGroupButton> <InputGroupButton variant="ghost" size="icon-xs"> <IconCopy /> </InputGroupButton> </InputGroupAddon> </InputGroup> </div> )
}
``` ### Spinner { #spinner } Show loading indicators while processing input. Saving...Please wait...
```tsx
import { LoaderIcon } from "lucide-react"
import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText,
} from "@/components/ui/input-group"
import { Spinner } from "@/components/ui/spinner"
export function InputGroupSpinner() { return ( <div className="grid w-full max-w-sm gap-4"> <InputGroup data-disabled> <InputGroupInput placeholder="Searching..." disabled /> <InputGroupAddon align="inline-end"> <Spinner /> </InputGroupAddon> </InputGroup> <InputGroup data-disabled> <InputGroupInput placeholder="Processing..." disabled /> <InputGroupAddon> <Spinner /> </InputGroupAddon> </InputGroup> <InputGroup data-disabled> <InputGroupInput placeholder="Saving changes..." disabled /> <InputGroupAddon align="inline-end"> <InputGroupText>Saving...</InputGroupText> <Spinner /> </InputGroupAddon> </InputGroup> <InputGroup data-disabled> <InputGroupInput placeholder="Refreshing data..." disabled /> <InputGroupAddon> <LoaderIcon className="animate-spin" /> </InputGroupAddon> <InputGroupAddon align="inline-end"> <InputGroupText className="text-muted-foreground"> Please wait... </InputGroupText> </InputGroupAddon> </InputGroup> </div> )
}
``` ### Label { #label } Add labels within input groups to improve accessibility. @Email
```tsx
import { InfoIcon } from "lucide-react"
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput,
} from "@/components/ui/input-group"
import { Label } from "@/components/ui/label"
import { Tooltip, TooltipContent, TooltipTrigger,
} from "@/components/ui/tooltip"
export function InputGroupLabel() { return ( <div className="grid w-full max-w-sm gap-4"> <InputGroup> <InputGroupInput id="email" placeholder="shadcn" /> <InputGroupAddon> <Label htmlFor="email">@</Label> </InputGroupAddon> </InputGroup> <InputGroup> <InputGroupInput id="email-2" placeholder="shadcn@vercel.com" /> <InputGroupAddon align="block-start"> <Label htmlFor="email-2" className="text-foreground"> Email </Label> <Tooltip> <TooltipTrigger asChild> <InputGroupButton variant="ghost" aria-label="Help" className="ml-auto rounded-full" size="icon-xs" > <InfoIcon /> </InputGroupButton> </TooltipTrigger> <TooltipContent> <p>We'll use this to send you notifications</p> </TooltipContent> </Tooltip> </InputGroupAddon> </InputGroup> </div> )
}
``` ### Dropdown { #dropdown } Pair input groups with dropdown menus for complex interactions. [Search In...](#)
```tsx
import { ChevronDownIcon, MoreHorizontal } from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput,
} from "@/components/ui/input-group"
export function InputGroupDropdown() { return ( <div className="grid w-full max-w-sm gap-4"> <InputGroup> <InputGroupInput placeholder="Enter file name" /> <InputGroupAddon align="inline-end"> <DropdownMenu> <DropdownMenuTrigger asChild> <InputGroupButton variant="ghost" aria-label="More" size="icon-xs" > <MoreHorizontal /> </InputGroupButton> </DropdownMenuTrigger> <DropdownMenuContent align="end"> <DropdownMenuItem>Settings</DropdownMenuItem> <DropdownMenuItem>Copy path</DropdownMenuItem> <DropdownMenuItem>Open location</DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> </InputGroupAddon> </InputGroup> <InputGroup className="[--radius:1rem]"> <InputGroupInput placeholder="Enter search query" /> <InputGroupAddon align="inline-end"> <DropdownMenu> <DropdownMenuTrigger asChild> <InputGroupButton variant="ghost" className="!pr-1.5 text-xs"> Search In... <ChevronDownIcon className="size-3" /> </InputGroupButton> </DropdownMenuTrigger> <DropdownMenuContent align="end" className="[--radius:0.95rem]"> <DropdownMenuItem>Documentation</DropdownMenuItem> <DropdownMenuItem>Blog Posts</DropdownMenuItem> <DropdownMenuItem>Changelog</DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> </InputGroupAddon> </InputGroup> </div> )
}
``` ### Button Group { #button-group } Wrap input groups with button groups to create prefixes and suffixes. https://
.com
```tsx
import { Link2Icon } from "lucide-react"
import { ButtonGroup, ButtonGroupText,
} from "@/components/ui/button-group"
import { InputGroup, InputGroupAddon, InputGroupInput,
} from "@/components/ui/input-group"
import { Label } from "@/components/ui/label"
export function InputGroupButtonGroup() { return ( <div className="grid w-full max-w-sm gap-6"> <ButtonGroup> <ButtonGroupText asChild> <Label htmlFor="url">https://</Label> </ButtonGroupText> <InputGroup> <InputGroupInput id="url" /> <InputGroupAddon align="inline-end"> <Link2Icon /> </InputGroupAddon> </InputGroup> <ButtonGroupText>.com</ButtonGroupText> </ButtonGroup> </div> )
}
``` ### Custom Input { #custom-input } Add the data-slot="input-group-control" attribute to your custom input for automatic behavior and focus state handling. No style is applied to the custom input. Apply your own styles using the className prop. [Submit](#)
```tsx
"use client"
import TextareaAutosize from "react-textarea-autosize"
import { InputGroup, InputGroupAddon, InputGroupButton,
} from "@/components/ui/input-group"
export function InputGroupCustom() { return ( <div className="grid w-full max-w-sm gap-6"> <InputGroup> <TextareaAutosize data-slot="input-group-control" className="flex field-sizing-content min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2.5 text-base transition-[color,box-shadow] outline-none md:text-sm" placeholder="Autoresize textarea..." /> <InputGroupAddon align="block-end"> <InputGroupButton className="ml-auto" size="sm" variant="default"> Submit </InputGroupButton> </InputGroupAddon> </InputGroup> </div> )
}
``` ```tsx
import { InputGroup, InputGroupAddon } from "@/component/ui/input-group"
import TextareaAutosize from "react-textarea-autosize"
export function InputGroupCustom() { return ( <InputGroup> <TextareaAutosize data-slot="input-group-control" className="dark:bg-input/30 flex field-sizing-content min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2 text-base transition-[color,box-shadow] outline-none" placeholder="Autoresize textarea..." /> <InputGroupAddon align="block-end">how</InputGroupAddon> </InputGroup> )
}
``` ## API Reference ### InputGroup { #inputgroup } The main component that wraps inputs and addons. | Prop | Type | Default |
| className | string | | ```tsx
<InputGroup> <InputGroupInput /> <InputGroupAddon />
</InputGroup>
``` ### InputGroupAddon { #inputgroupaddon } Displays icons, text, buttons, or other content alongside inputs. Focus NavigationFor 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 | | ```tsx
<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. ```tsx
<InputGroupAddon> <InputGroupButton>Button</InputGroupButton> <InputGroupButton>Button</InputGroupButton>
</InputGroupAddon>
``` ### InputGroupButton { #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 | | ```tsx
<InputGroupButton>Button</InputGroupButton>
<InputGroupButton size="icon-xs" aria-label="Copy"> <CopyIcon />
</InputGroupButton>
``` ### InputGroupInput { #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. ```tsx
<InputGroup> <InputGroupInput placeholder="Enter text..." /> <InputGroupAddon> <SearchIcon /> </InputGroupAddon>
</InputGroup>
``` ### InputGroupTextarea { #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. ```tsx
<InputGroup> <InputGroupTextarea placeholder="Enter message..." /> <InputGroupAddon align="block-end"> <InputGroupButton>Send</InputGroupButton> </InputGroupAddon>
</InputGroup>
``` ## Changelog ### 2025-10-06 InputGroup { #2025-10-06-inputgroup } Add the min-w-0 class to the InputGroup component. See [diff](https://github.com/shadcn-ui/ui/pull/8341/files#diff-0e2ee95d0050ca4c5d82339df86c54e14a6739dc4638fdda0eec8f73aebc2da9).