Input Group

import { InputGroup, InputGroupAddon, InputGroupInput } from "@rdloom/react";

export default function InputGroupUrlExample() {
  return (
    <div className="flex w-full justify-center">
      <InputGroup label="Workspace address" description="Letters, numbers and dashes only." className="w-80">
        <InputGroupAddon>https://</InputGroupAddon>
        <InputGroupInput placeholder="acme" />
        <InputGroupAddon align="end">.example.com</InputGroupAddon>
      </InputGroup>
    </div>
  );
}

"use client";

import { useRef, useState } from "react";
import { Button, InputGroup, InputGroupAddon, InputGroupInput } from "@rdloom/react";

const icon = { "aria-hidden": true, viewBox: "0 0 16 16", width: 16, height: 16, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" } as const;

export default function InputGroupSearchExample() {
  const [value, setValue] = useState("invoice");
  const input = useRef<HTMLInputElement>(null);
  return (
    <div className="flex w-full justify-center">
      <InputGroup label="Search invoices" value={value} onChange={setValue} className="w-72">
        <InputGroupAddon type="icon">
          <svg {...icon}><circle cx="7" cy="7" r="4.5" /><path d="M10.5 10.5L14 14" /></svg>
        </InputGroupAddon>
        <InputGroupInput ref={input} placeholder="Customer or number" />
        {value && (
          <InputGroupAddon type="button" align="end">
            <Button
              variant="ghost"
              size="sm"
              aria-label="Clear search"
              className="aspect-square px-0!"
              onPress={() => {
                setValue("");
                input.current?.focus();
              }}
            >
              <svg {...icon}><path d="M4 4l8 8M12 4l-8 8" /></svg>
            </Button>
          </InputGroupAddon>
        )}
      </InputGroup>
    </div>
  );
}

"use client";

import { useState } from "react";
import { Button, InputGroup, InputGroupAddon, InputGroupInput } from "@rdloom/react";

const icon = { "aria-hidden": true, viewBox: "0 0 16 16", width: 16, height: 16, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" } as const;

export default function InputGroupPasswordExample() {
  const [shown, setShown] = useState(false);
  return (
    <div className="flex w-full justify-center">
      <InputGroup label="Password" description="At least 12 characters." isRequired className="w-72">
        <InputGroupInput type={shown ? "text" : "password"} autoComplete="new-password" />
        <InputGroupAddon type="button" align="end">
          {/* The name stays the same; aria-pressed says whether the password is visible. */}
          <Button
            variant="ghost"
            size="sm"
            aria-label="Show password"
            aria-pressed={shown}
            className="aspect-square px-0!"
            onPress={() => setShown((v) => !v)}
          >
            <svg {...icon}>
              <path d="M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8z" />
              <circle cx="8" cy="8" r="2" />
              {shown && <path d="M2.5 13.5l11-11" />}
            </svg>
          </Button>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

"use client";

import { useState } from "react";
import { Button, InputGroup, InputGroupAddon, InputGroupInput } from "@rdloom/react";

const icon = { "aria-hidden": true, viewBox: "0 0 16 16", width: 16, height: 16, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" } as const;
const link = "https://example.com/invite/k3x9qw";

export default function InputGroupCopyExample() {
  const [copied, setCopied] = useState(false);
  return (
    <div className="flex w-full justify-center">
      <InputGroup label="Invite link" defaultValue={link} isReadOnly className="w-80">
        <InputGroupInput />
        <InputGroupAddon type="button" align="end">
          <Button
            variant="ghost"
            size="sm"
            aria-label="Copy link"
            className="aspect-square px-0!"
            onPress={() => {
              void navigator.clipboard?.writeText(link);
              setCopied(true);
              setTimeout(() => setCopied(false), 2000);
            }}
          >
            {copied ? (
              <svg {...icon}><path d="M3 8.5l3.5 3.5L13 4.5" /></svg>
            ) : (
              <svg {...icon}><rect x="5.5" y="5.5" width="8" height="8" rx="1.5" /><path d="M10.5 5.5v-2a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2" /></svg>
            )}
          </Button>
        </InputGroupAddon>
        <span role="status" className="sr-only">{copied ? "Link copied" : ""}</span>
      </InputGroup>
    </div>
  );
}