Forms

"use client";
 
import { ColorInput } from "chroma-panel";
import { useState } from "react";
 
export default function ColorInputFormDemo() {
  const [submitted, setSubmitted] = useState<string | null>(null);
 
  return (
    <form
      className="flex items-center gap-3"
      onSubmit={(event) => {
        event.preventDefault();
        const data = new FormData(event.currentTarget);
        setSubmitted(String(data.get("brand")));
      }}
    >
      <ColorInput name="brand" defaultValue="#cc3366" injectStyles={false} />
 
      <button
        type="submit"
        className="rounded-md border border-edge px-3 py-1.5 text-sm font-medium"
      >
        Submit
      </button>
 
      <button
        type="reset"
        className="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground"
        onClick={() => setSubmitted(null)}
      >
        Reset
      </button>
 
      {submitted && (
        <span className="font-mono text-sm text-muted-foreground">
          {submitted}
        </span>
      )}
    </form>
  );
}