FormFieldSet

function SignupForm() {
  return (
    <Form onSubmit={(data) => alert(JSON.stringify(data, null, 2))}>
      <div className="flex flex-col gap-4">
        <FormFieldSet
          type="text"
          name="name"
          label="Full Name"
          validation={{ rules: { required: true } }}
        />
        <FormFieldSet
          type="email"
          name="email"
          label="Email Address"
          validation={{ rules: { required: true, email: true } }}
        />
        <FormFieldSet
          type="select"
          name="role"
          label="Role"
          options={[
            { label: "Developer", value: "dev" },
            { label: "Designer", value: "design" },
          ]}
        />
        <FormFieldSet
          type="password"
          name="password"
          label="Password"
          validation={{ rules: { required: true } }}
        />
        <FormFieldSet
          type="switch"
          name="terms"
          label="Accept Terms"
        />
        <Button type="submit" color="primary">
          Create Account
        </Button>
      </div>
    </Form>
  );
}

function LoginForm() {
  const [serverError, setServerError] = useState("");

  async function handleLogin(data: any) {
    const res = await fetch("/api/login", {
      method: "POST",
      body: JSON.stringify(data),
    });
    if (!res.ok) {
      const err = await res.json();
      setServerError(err.message);
    }
  }

  return (
    <Form onSubmit={handleLogin}>
      <div className="flex flex-col gap-4">
        <FormFieldSet
          type="email"
          name="email"
          label="Email"
          placeholder="you@example.com"
          validation={{
            rules: { required: true, email: true },
            message: {
              required: "Email is required",
              email: "Please enter a valid email address",
            },
          }}
        />
        <FormFieldSet
          type="password"
          name="password"
          label="Password"
          validation={{ rules: { required: true } }}
          error={serverError}
        />
        <Button type="submit" color="primary">
          Sign In
        </Button>
      </div>
    </Form>
  );
}

// Text-like inputs
<FormFieldSet type="text" name="text" label="Text" />
<FormFieldSet type="number" name="num" label="Number" min={0} max={100} />
<FormFieldSet type="email" name="email" label="Email" />
<FormFieldSet type="password" name="pw" label="Password" />
<FormFieldSet type="url" name="url" label="URL" />
<FormFieldSet type="search" name="q" label="Search" />
<FormFieldSet type="color" name="c" label="Color" />
<FormFieldSet type="textarea" name="bio" label="Bio" rows={3} />

// Selection types
<FormFieldSet type="select" name="role" label="Role"
  options={[{ label: "A", value: "a" }]} />
<FormFieldSet type="radio" name="gender" label="Gender"
  options={[{ label: "Male", value: "m" }]} />
<FormFieldSet type="checkbox" name="hobbies" label="Hobbies"
  options={[{ label: "Code", value: "code" }]} />
<FormFieldSet type="switch" name="on" label="Enable" />

// Specialized types
<FormFieldSet type="datepicker" name="dob" label="Date" />
<FormFieldSet type="phone" name="tel" label="Phone" defaultCountryCode="us" />
<FormFieldSet type="range" name="vol" label="Volume" min={0} max={100} />
<FormFieldSet type="otp" name="code" label="OTP" length={4} />
<FormFieldSet type="file" name="doc" label="Upload" accept="image/*" />

import { Form, FormFieldSet, Button, useFormContext } from 'oks-ui';

function DynamicForm() {
  return (
    <Form onSubmit={(data) => console.log(data)}>
      <div className="flex flex-col gap-4">
        <FormFieldSet
          type="select"
          name="contactMethod"
          label="Contact Method"
          options={[
            { label: "Email", value: "email" },
            { label: "Phone", value: "phone" },
          ]}
        />
        <ConditionalFields />
        <Button type="submit">Submit</Button>
      </div>
    </Form>
  );
}

function ConditionalFields() {
  const { getValues } = useFormContext();
  const method = getValues().contactMethod;

  if (method === "email") {
    return <FormFieldSet type="email" name="email" label="Email Address" />;
  }
  if (method === "phone") {
    return <FormFieldSet type="phone" name="phone" label="Phone Number" />;
  }
  return null;
}

<FormFieldSet type="text" name="top" label="Top Label" labelPlacement="top" />
<FormFieldSet type="text" name="float" label="Floating Label" labelPlacement="floating" />

<FormFieldSet type="text" name="v1" label="Default" variant="default" />
<FormFieldSet type="text" name="v2" label="Soft" variant="soft" />
<FormFieldSet type="text" name="v3" label="Underline" variant="underline" />