Field Demo

"use client"

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/mizzle/forms/field"
import { Input } from "@/components/mizzle/forms/input"

export default function FieldDemo() {
  return (
    <Field
      validationMode="onBlur"
      validate={(value) =>
        typeof value === "string" && value.endsWith("@example.com")
          ? "Use your work address, not the example one."
          : null
      }
      className="w-[320px] max-w-full"
    >
      <FieldLabel>Work email</FieldLabel>
      <Input type="email" required placeholder="you@company.com" />
      <FieldDescription>We send the invite here.</FieldDescription>
      <FieldError />
    </Field>
  )
}