Input Group

1"use client";
2
3import * as React from "react";
4import { cva, type VariantProps } from "class-variance-authority";
5
6import { cn } from "@/lib/utils";
7import { Button } from "@/registry/default/button/button";
8import { Input, type InputProps } from "@/registry/default/input/input";
9import { Textarea } from "@/registry/default/textarea/textarea";
10
11const inputGroupVariants = cva(
12  [
13    "group/input-group relative flex w-full items-center rounded-lg border bg-clip-padding",
14    "min-w-0 has-[>textarea]:h-auto",
15
16    // Variants based on alignment.
17    "has-[>[data-align=inline-start]]:[&>input]:pl-2",
18    "has-[>[data-align=inline-end]]:[&>input]:pr-2",
19    "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
20    "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
21
22    // Focus state.
23    "has-[[data-slot=input-group-control]:focus-visible]:outline-ring/50 has-[[data-slot=input-group-control]:focus-visible]:outline-2 has-[[data-slot=input-group-control]:focus-visible]:outline-offset-2 has-[[data-slot=input-group-control]:focus-visible]:outline-solid",
24
25    // Error state.
26    "has-[[data-slot][aria-invalid=true]]:outline-destructive/50 has-[[data-slot][aria-invalid=true]]:outline-2 has-[[data-slot][aria-invalid=true]]:outline-offset-2 has-[[data-slot][aria-invalid=true]]:outline-solid",
27
28    // Transition outline
29    "outline-0 outline-offset-0 outline-transparent transition-[outline-width,outline-offset,outline-color] duration-100 ease-out",
30  ],
31  {
32    variants: {
33      variant: {
34        // Opaque "lifted" bg — use on the page or any non-elevated substrate.
35        default: "bg-input",
36        // Translucent overlay — use inside Cards, Dialogs, or any surface
37        // where the opaque default would collapse into its parent.
38        elevated: "bg-input-elevated",
39      },
40    },
41    defaultVariants: {
42      variant: "default",
43    },
44  },
45);
46
47function InputGroup({
48  className,
49  variant,
50  ...props
51}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupVariants>) {
52  return (
53    <div
54      data-slot="input-group"
55      role="group"
56      className={cn(inputGroupVariants({ variant }), className)}
57      {...props}
58    />
59  );
60}
61
62const inputGroupAddonVariants = cva(
63// … truncated