Input Group
Display additional information or actions to an input or textarea.
Display additional information or actions to an input or textarea.
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
InputGroupText,
InputGroupTextarea,
} from "@/components/ui/input-group";<InputGroup>
<InputGroupInput placeholder="Search..." />
<InputGroupAddon>
<SearchIcon />
</InputGroupAddon>
<InputGroupAddon align="inline-end">
<InputGroupButton>Search</InputGroupButton>
</InputGroupAddon>
</InputGroup>Display additional text information alongside inputs.
Add buttons to perform actions within the input group.
Add tooltips to provide additional context or help.
Input groups also work with textarea components. Use block-start or block-end for alignment.
Show loading indicators while processing input.
Add labels within input groups to improve accessibility.
Pair input groups with menu / dropdown menus for complex interactions.