Input

import { useState } from "react";
import { IconButton, Input, KbdGroup, Spinner } from "@arcadia/ui";

function Slots() {
  const [query, setQuery] = useState("compaction");
  return (
    <div {...sx("cmp-form", cmp.form)}>
      <Input
        leadingIcon="search"
        placeholder="Search settings"
        aria-label="Search settings"
        end={<KbdGroup keys="mod+k" size="sm" variant="plain" />}
      />
      <Input
        leadingIcon="search"
        aria-label="Search"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        end={query && (
          <IconButton
            icon="x"
            label="Clear"
            size="xs"
            shape="pill"
            tone="muted"
            tooltip={false}
            onClick={() => setQuery("")}
          />
        )}
      />
      <Input
        leadingIcon="globe"
        aria-label="API URL"
        defaultValue="https://api.example.com/v1"
        end={<Spinner size="sm" label="Checking" />}
      />
    </div>
  );
}

import { Input } from "@arcadia/ui";

<Input variant="ghost" leadingIcon="search" placeholder="Search projects and chats" aria-label="Search" />

import { Input } from "@arcadia/ui";

<Input mono placeholder="XXXX-XXXX" aria-label="One-time code" />

import { useRef, useState } from "react";
import { Button, Field, Input } from "@arcadia/ui";

function InAForm() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState<string | null>(null);
  const field = useRef<HTMLInputElement>(null);
  const submit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (email.includes("@")) return setError(null);
    setError("Enter an email address, like [email protected].");
    field.current?.focus();
  };
  return (
    <form {...sx("cmp-form", cmp.form)} onSubmit={submit} noValidate>
      <Field label="Email" description="We send the sign-in link here." error={error}>
        <Input
          ref={field}
          type="email"
          name="email"
          autoComplete="email"
          required
          value={email}
          onChange={(e) => { setEmail(e.target.value); setError(null); }}
        />
      </Field>
      <div {...sx("cmp-form-actions", cmp.formActions)}>
        <Button type="submit" variant="primary">Send link</Button>
      </div>
    </form>
  );
}