Field

"use client";
import * as React from "react";
import { Field, FieldControl, fieldSurface } from "@/components/ui/notchset/field";

/* Field gives any control its label and its hint or error; TextField and TextArea are built on it. */
export default function FieldDemo() {
  const [seats, setSeats] = React.useState("12");
  const n = Number(seats);
  const error = !seats.trim() || !Number.isInteger(n) || n < 1 ? "A whole number of seats, like 12" : n > 10 ? "Growth holds 10 seats. Pick Scale for more." : undefined;
  return (
    <div className="w-[280px]">
      <Field label="Seats" hint="Everyone who signs in needs one" error={error}>
        <FieldControl inputMode="numeric" value={seats} onChange={(e) => setSeats(e.target.value)} className={`${fieldSurface} h-[var(--ns-field)]`} />
      </Field>
    </div>
  );
}