Input Group

1import { forwardRef } from "react";
2import { cn } from "@/lib/utils";
3import { glass } from "@/lib/glass";
4 
5export function InputGroup({
6  className,
7  ...props
8}: React.ComponentProps<"div">) {
9  return (
10    <div
11      data-slot="input-group"
12      role="group"
13      className={cn(
14        glass,
15        // The group itself is the glass field; the input inside is transparent
16        // and addons sit inline, so no manual padding juggling is needed.
17        "relative flex h-10 w-full min-w-0 items-center rounded-xl text-sm",
18        "transition focus-within:outline-none focus-within:ring-[3px] focus-within:ring-blue-500/40 dark:focus-within:ring-blue-400/50 focus-within:ring-offset-2 focus-within:ring-offset-transparent",
19        "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50",
20        className,
21      )}
22      {...props}
23    />
24  );
25}
26 
27export const InputGroupAddon = forwardRef<
28  HTMLDivElement,
29  React.ComponentProps<"div"> & { align?: "inline-start" | "inline-end" }
30>(({ className, align = "inline-start", ...props }, ref) => (
31  <div
32    ref={ref}
33    role="group"
34    data-slot="input-group-addon"
35    data-align={align}
36    className={cn(
37      "flex shrink-0 items-center gap-2 text-current/60",
38      align === "inline-start" ? "ps-3.5" : "pe-3.5",
39      className,
40    )}
41    {...props}
42  />
43));
44InputGroupAddon.displayName = "InputGroupAddon";
45 
46export const InputGroupInput = forwardRef<
47  HTMLInputElement,
48  React.ComponentProps<"input">
49>(({ className, ...props }, ref) => (
50  <input
51    ref={ref}
52    data-slot="input-group-input"
53    className={cn(
54      "h-full w-full min-w-0 flex-1 bg-transparent px-3.5 text-sm font-normal outline-none placeholder:text-current/40 disabled:cursor-not-allowed",
55      className,
56    )}
57    {...props}
58  />
59));
60InputGroupInput.displayName = "InputGroupInput";
61 
62export function InputGroupText({
63  className,
64  ...props
65}: React.ComponentProps<"span">) {
66  return (
67    <span
68      data-slot="input-group-text"
69      className={cn("text-sm text-current/70", className)}
70      {...props}
71    />
72  );
73}