Components
Loading preview...
Here is Input Group component
npx shadcn@latest add https://21st.dev/r/shadcn/input-group"use client";
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,
TooltipProvider,
} from "@/components/ui/tooltip";
export default function InputGroupLabel() {
return (
<TooltipProvider>
<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>
</TooltipProvider>
);
}