28 lines
1010 B
TypeScript
28 lines
1010 B
TypeScript
import { controlClass } from "./Button";
|
|
|
|
export function Field({
|
|
label,
|
|
hint,
|
|
error,
|
|
className,
|
|
...input
|
|
}: React.InputHTMLAttributes<HTMLInputElement> & {
|
|
label: string;
|
|
hint?: React.ReactNode;
|
|
error?: string;
|
|
}) {
|
|
return (
|
|
<label className="grid max-w-md gap-1.5">
|
|
<span className="font-mono text-[0.72rem] uppercase tracking-[0.1em] text-ink-3">{label}</span>
|
|
{/*
|
|
* className is pulled out of the spread rather than left in it: it
|
|
* used to be spread onto the input and then overwritten by the
|
|
* hardcoded one below, so a caller passing className got nothing and
|
|
* no warning.
|
|
*/}
|
|
<input {...input} className={controlClass(className)} aria-invalid={error ? true : undefined} />
|
|
{error ? <span className="text-[0.82rem] text-expired">{error}</span> : hint ? <span className="text-[0.82rem] text-ink-3">{hint}</span> : null}
|
|
</label>
|
|
);
|
|
}
|