General Resources, guides, and helpful links.
Blocks Larger composed sections for building pages.
Components Copy and paste UI components into your apps.
Animations Beautiful animations and effects for your UI.
Display additional information or actions to an input or textarea.
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, } from "@/components/ui/input-group"
Copy < InputGroup > < InputGroupInput placeholder = "Search..." /> < InputGroupAddon > < SearchIcon /> </ InputGroupAddon > < InputGroupAddon align = "inline-end" > < InputGroupButton >Search</ InputGroupButton > </ InputGroupAddon > </ InputGroup >
Examples
Icon
Text Display additional text information alongside inputs.
Add buttons to perform actions within the input group.
Add tooltips to provide additional context or help.
Textarea Input groups also work with textarea components. Use block-start or block-end for alignment.
Spinner Show loading indicators while processing input.
Label Add labels within input groups to improve accessibility.
Dropdown Pair input groups with dropdown menus for complex interactions.
Wrap input groups with button groups to create prefixes and suffixes.
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.
Copy 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
The main component that wraps inputs and addons.
Copy < InputGroup > < InputGroupInput /> < InputGroupAddon /> </ InputGroup >
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.
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 >
Displays buttons within input groups.
Copy < InputGroupButton >Button</ InputGroupButton > < InputGroupButton size = "icon-xs" aria-label = "Copy" > < CopyIcon /> </ InputGroupButton >
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 >
Changelog
Add the min-w-0 class to the InputGroup component. See diff .
Copy import { IconCheck, IconInfoCircle, IconPlus } from "@tabler/icons-react" import { ArrowUp, 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 > < ArrowUp /> < span className = "sr-only" >Send</ span > </ InputGroupButton > </ InputGroupAddon > </ InputGroup > < InputGroup > < InputGroupInput placeholder = "@pitsi" /> < 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 > ) } Copy import { HelpCircle, Info } 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" > < Info /> </ 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 > ) } Copy 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 > ) } Copy 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 > ) } Copy 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 = "pitsi" /> < InputGroupAddon > < Label htmlFor = "email" >@</ Label > </ InputGroupAddon > </ InputGroup > < InputGroup > < InputGroupInput id = "email-2" placeholder = "pitsi@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 > ) } Copy import { ChevronDown, 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... < ChevronDown 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 > ) } Copy 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 > ) } Copy "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 > ) } Copy 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 > ) } Copy "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/pitsi" readOnly /> < InputGroupAddon align = "inline-end" > < InputGroupButton aria-label = "Copy" title = "Copy" size = "icon-xs" onClick = {() => { copyToClipboard ( "https://x.com/pitsi" ) }} > {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 > ) } Copy import { Check, CreditCard, Info, Mail, Search, Star } 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 > < Search /> </ InputGroupAddon > </ InputGroup > < InputGroup > < InputGroupInput type = "email" placeholder = "Enter your email" /> < InputGroupAddon > < Mail /> </ InputGroupAddon > </ InputGroup > < InputGroup > < InputGroupInput placeholder = "Card number" /> < InputGroupAddon > < CreditCard /> </ InputGroupAddon > < InputGroupAddon align = "inline-end" > < Check /> </ InputGroupAddon > </ InputGroup > < InputGroup > < InputGroupInput placeholder = "Card number" /> < InputGroupAddon align = "inline-end" > < Star /> < Info /> </ InputGroupAddon > </ InputGroup > </ div > ) } 