"use client";

import {
  Button,
  Field,
  FieldControl,
  FieldError,
  FieldLabel,
  Form,
  Input,
} from "@countryclub/ui-react";
import { useState } from "react";

export default function FormDemo() {
  const [submitted, setSubmitted] = useState(false);

  return (
    <Form
      className="w-full max-w-sm"
      onSubmit={(event) => {
        event.preventDefault();
        setSubmitted(true);
      }}
    >
      <Field name="email">
        <FieldLabel>Email</FieldLabel>
        <FieldControl
          render={<Input placeholder="member@country.club" type="email" />}
          required
        />
        <FieldError match="valueMissing">
          Enter your email to receive the club newsletter.
        </FieldError>
        <FieldError match="typeMismatch">
          That does not look like a valid email address.
        </FieldError>
      </Field>
      <Button className="self-start" type="submit">
        Subscribe
      </Button>
      {submitted && (
        <p className="text-muted-foreground text-sm">
          You are on the list. See you at the club.
        </p>
      )}
    </Form>
  );
}
Form

Import

Default
