Form (Formily)

"use client";

import { useMemo, useState } from "react";
import { toast } from "sonner";

import { Checkbox } from "@/components/f-ui/formily/connects/checkbox";
import { Input } from "@/components/f-ui/formily/connects/input";
import { Select } from "@/components/f-ui/formily/connects/select";
import { Textarea } from "@/components/f-ui/formily/connects/textarea";
import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";

const PRIORITIES = [
  { label: "Standard", value: "standard" },
  { label: "Express", value: "express" },
];

interface OrderValues {
  customer: string;
  priority: string;
  notes: string;
  confirmed: boolean;
}

/** Formily `required` does not treat `false` as empty on boolean fields. */
function validateConfirmed(value: boolean) {
  return value ? "" : "Please confirm the fulfillment policy";
}

export function FormilyDemo() {
  const form = useMemo(
    () =>
      createForm<OrderValues>({
        initialValues: {
          customer: "",
          priority: "standard",
          notes: "",
          confirmed: false,
        },
      }),
    [],
  );
  const [submitted, setSubmitted] = useState<OrderValues | null>(null);

  return (
    <div className="w-full max-w-sm space-y-4">
      <Form form={form} onSubmit={(values) => {
          setSubmitted({ ...values });
          toast.success("Submitted successfully");
        }}>
        <FormField
          name="customer"
          label="Customer"
          required
          component={[Input, { placeholder: "Acme Corp" }]}
        />
        <FormField
          name="priority"
          label="Priority"
          component={[Select, { options: PRIORITIES }]}
        />
        <FormField
          name="notes"
          label="Notes"
          component={[Textarea, { placeholder: "Optional fulfillment notes" }]}
        />
        <FormField
          name="confirmed"
          label="I confirm the fulfillment policy"
          inlineLabel
          required
          validator={{ validator: validateConfirmed }}
          component={[Checkbox]}
        />
        <FormActions>
          <Button type="submit">
            Submit order
          </Button>
        </FormActions>
      </Form>

      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";
import { toast } from "sonner";

import { Input } from "@/components/f-ui/formily/connects/input";
import { Textarea } from "@/components/f-ui/formily/connects/textarea";
import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";

interface ReviewValues {
  createdAt: Date | null;
  sku: string;
  region: string;
  comment: string;
}

export function FormilyMixedPatternDemo() {
  const form = useMemo(
    () =>
      createForm<ReviewValues>({
        initialValues: {
          createdAt: new Date(2026, 7, 1),
          sku: "SKU-104",
          region: "apac",
          comment: "",
        },
      }),
    [],
  );
  const [submitted, setSubmitted] = useState<ReviewValues | null>(null);

  return (
    <div className="w-full max-w-sm space-y-4">
      <Form
        form={form}
        onSubmit={(values) => {
          setSubmitted({ ...values });
          toast.success("Submitted successfully");
        }}
      >
        <FormField
          name="createdAt"
          label="Created"
          description="System timestamp — display only"
          readPretty
          kind="date"
        />
        <FormField
          name="sku"
          label="SKU"
          description="Locked in this Edit session — still a textbox. Approver inbox uses display until Unlock, not this chrome."
          readOnly
          lockReason="Locked for this Edit session."
          component={[Input]}
        />
        <FormField
          name="region"
          label="Region"
          readOnly
          kind="radio"
          lockReason="Set by the approval route — reopen the request to change it."
          componentProps={{
            options: [
              { label: "APAC", value: "apac" },
              { label: "EMEA", value: "emea" },
            ],
            orientation: "horizontal",
          }}
        />
        <FormField
          name="comment"
          label="Comment"
          description="Writable this session"
          component={[Textarea, { placeholder: "Approver note" }]}
        />
        <FormActions>
          <Button type="submit">
            Submit review
          </Button>
        </FormActions>
      </Form>

      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";
import { toast } from "sonner";

import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";

const TAG_OPTIONS = [
  { label: "Frontend", value: "fe" },
  { label: "Backend", value: "be" },
  { label: "Infra", value: "infra" },
];

interface InputsValues {
  amount: number | null;
  due: Date | null;
  tags: string[];
  brandColor: string | null;
}

export function FormilyInputsDemo() {
  const form = useMemo(
    () =>
      createForm<InputsValues>({
        initialValues: {
          amount: null,
          due: null,
          tags: [],
          brandColor: "#1677ff",
        },
      }),
    [],
  );
  const [submitted, setSubmitted] = useState<InputsValues | null>(null);

  return (
    <div className="w-full max-w-sm space-y-4">
      <Form form={form} onSubmit={(values) => {
          setSubmitted({ ...values });
          toast.success("Submitted successfully");
        }}>
        <FormField
          name="amount"
          label="Amount"
          description="Cleared fields submit null, never undefined"
          kind="currency"
          componentProps={{ currency: "USD", placeholder: "0.00" }}
        />
        <FormField name="due" label="Due date" kind="date" />
        <FormField
          name="tags"
          label="Tags"
          kind="multiSelect"
          componentProps={{ options: TAG_OPTIONS }}
        />
        <FormField
          name="brandColor"
          label="Brand color"
          kind="color"
          description="kind=color commits a CSS string (#rrggbb / rgba) or null when cleared"
          componentProps={{
            allowClear: true,
            showText: true,
            presets: [
              {
                label: "Brand",
                colors: ["#1677ff", "#52c41a", "#faad14", "#f5222d"],
              },
            ],
          }}
        />
        <FormActions>
          <Button type="submit">
            Submit
          </Button>
        </FormActions>
      </Form>

      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useCallback, useMemo, useState } from "react";
import { toast } from "sonner";

import {
  Select,
  type SelectOption,
} from "@/components/f-ui/formily/connects/select";
import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";

/** Static pool — stand in for your user directory API. */
const USERS: SelectOption[] = [
  { value: "u1", label: "Ada Lovelace" },
  { value: "u2", label: "Alan Turing" },
  { value: "u3", label: "Grace Hopper" },
  { value: "u4", label: "Katherine Johnson" },
  { value: "u5", label: "Margaret Hamilton" },
];

function delay(ms: number) {
  return new Promise<void>((resolve) => {
    setTimeout(resolve, ms);
  });
}

interface AssigneeValues {
  assigneeId: string | null;
}

export function FormilySelectDemo() {
  const form = useMemo(
    () =>
      createForm<AssigneeValues>({
        initialValues: { assigneeId: "u2" },
      }),
    [],
  );
  const [submitted, setSubmitted] = useState<AssigneeValues | null>(null);

  const searchUsers = useCallback(async (query: string) => {
    await delay(300);
    const q = query.trim().toLowerCase();
    if (!q) return USERS;
    return USERS.filter((user) => user.label.toLowerCase().includes(q));
  }, []);

  return (
    <div className="w-full max-w-sm space-y-4">
      <Form form={form} onSubmit={(values) => {
          setSubmitted({ ...values });
          toast.success("Submitted successfully");
        }}>
        <FormField
          name="assigneeId"
          label="Assignee"
          required
          description="Async onSearch with focus preload; defaultOptions seeds the saved label"
          component={[
            Select,
            {
              onSearch: searchUsers,
              triggerSearchOnFocus: true,
              placeholder: "Search users",
              defaultOptions: [{ value: "u2", label: "Alan Turing" }],
            },
          ]}
        />
        <FormActions>
          <Button type="submit">
            Save assignee
          </Button>
        </FormActions>
      </Form>

      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";
import { toast } from "sonner";

import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";

interface ContactValues {
  email: string;
  website: string;
  phone: string;
}

export function FormilyKindsDemo() {
  const form = useMemo(
    () =>
      createForm<ContactValues>({
        initialValues: { email: "", website: "", phone: "" },
      }),
    [],
  );
  const [submitted, setSubmitted] = useState<ContactValues | null>(null);

  return (
    <div className="w-full max-w-sm space-y-4">
      <Form form={form} onSubmit={(values) => {
          setSubmitted({ ...values });
          toast.success("Submitted successfully");
        }}>
        <FormField
          name="email"
          label="Email"
          required
          kind="email"
          description="Validates on blur with Formily's built-in email format"
        />
        <FormField name="website" label="Website" kind="url" />
        <FormField
          name="phone"
          label="Phone"
          kind="phone"
          description="E.164 — try 5550001234 vs +1 555 000 1234"
        />
        <FormActions>
          <Button type="submit">
            Save contact
          </Button>
        </FormActions>
      </Form>

      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";
import { toast } from "sonner";

import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";

const METHOD_OPTIONS = [
  { label: "Card", value: "card" },
  { label: "Wire", value: "wire" },
  { label: "Cash", value: "cash" },
];

const CHANNEL_OPTIONS = [
  { label: "Email", value: "email" },
  { label: "SMS", value: "sms" },
  { label: "Push", value: "push" },
];

interface ChoiceGroupValues {
  method: string | null;
  channels: string[];
}

export function FormilyChoiceGroupsDemo() {
  const form = useMemo(
    () =>
      createForm<ChoiceGroupValues>({
        initialValues: {
          method: null,
          channels: [],
        },
      }),
    [],
  );
  const [submitted, setSubmitted] = useState<ChoiceGroupValues | null>(null);

  return (
    <div className="w-full max-w-sm space-y-4">
      <Form
        form={form}
        onSubmit={(values) => {
          setSubmitted({ ...values });
          toast.success("Submitted successfully");
        }}
      >
        <FormField
          name="method"
          label="Payment method"
          required
          kind="radio"
          description="Starts empty (null). After you pick one, radios cannot clear themselves — Reset field sets null from outside."
          componentProps={{
            options: METHOD_OPTIONS,
            orientation: "horizontal",
          }}
        />
        <FormField
          name="channels"
          label="Channels"
          required
          kind="checkboxGroup"
          description="Empty is []. Uncheck all options to clear. Required means at least one checked."
          componentProps={{
            options: CHANNEL_OPTIONS,
          }}
        />
        <FormActions>
          <Button
            type="button"
            variant="outline"
            onClick={() => {
              form.setValues({ method: null, channels: [] });
              setSubmitted(null);
            }}
          >
            Reset fields
          </Button>
          <Button type="submit">
            Save preferences
          </Button>
        </FormActions>
      </Form>

      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";
import { toast } from "sonner";

import type { FileUploadItem } from "@/components/f-ui/file-upload/file-upload-types";
import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { validateFileRequired } from "@/components/f-ui/formily/validators/file-upload";
import { Button } from "@/components/ui/button";

import { createFakeUpload } from "./fake-upload";

interface AttachmentValues {
  attachments: FileUploadItem[];
}

const upload = createFakeUpload();

export function FileUploadFormFieldDemo() {
  const form = useMemo(
    () =>
      createForm<AttachmentValues>({
        initialValues: { attachments: [] },
      }),
    [],
  );
  const [submitted, setSubmitted] = useState<AttachmentValues | null>(null);

  return (
    <div className="w-full max-w-sm space-y-4">
      <Form
        form={form}
        onSubmit={(values) => {
          setSubmitted({ ...values });
          toast.success("Submitted successfully");
        }}
      >
        <FormField
          name="attachments"
          label="Attachments"
          description="Required — upload at least one file. Progress is not an error; submit waits until uploads finish."
          kind="file"
          required
          validator={[{ validator: validateFileRequired }]}
          componentProps={{
            multiple: true,
            upload,
          }}
        />
        <FormActions>
          <Button type="submit">
            Submit
          </Button>
        </FormActions>
      </Form>

      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";
import { toast } from "sonner";

import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";

interface BodyValues {
  body?: string;
}

export function RichTextEditorFormFieldDemo() {
  const form = useMemo(
    () =>
      createForm<BodyValues>({
        initialValues: { body: undefined },
      }),
    [],
  );
  const [submitted, setSubmitted] = useState<BodyValues | null>(null);

  return (
    <div className="w-full max-w-xl space-y-4">
      <Form
        form={form}
        onSubmit={(values) => {
          setSubmitted({ ...values });
          toast.success("Submitted successfully");
        }}
      >
        <FormField
          name="body"
          label="Description"
          description="Required — empty paragraphs do not count as content."
          kind="richText"
          required
          componentProps={{
            placeholder: "Write the description…",
            minHeight: 140,
          }}
        />
        <FormActions>
          <Button type="submit">Submit</Button>
        </FormActions>
      </Form>

      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";
import { toast } from "sonner";

import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";

interface ThemeValues {
  brandColor: string | null;
}

export function ColorPickerFormilyDemo() {
  const form = useMemo(
    () =>
      createForm<ThemeValues>({
        initialValues: { brandColor: "#1677ff" },
      }),
    [],
  );
  const [submitted, setSubmitted] = useState<ThemeValues | null>(null);

  return (
    <div className="w-full max-w-sm space-y-4">
      <Form
        form={form}
        onSubmit={(values) => {
          setSubmitted({ ...values });
          toast.success("Submitted successfully");
        }}
      >
        <FormField
          name="brandColor"
          label="Brand color"
          kind="color"
          description="Formily kind=color commits a CSS string (or null when cleared)."
          componentProps={{
            allowClear: true,
            showText: true,
            presets: [
              {
                label: "Brand",
                colors: ["#1677ff", "#52c41a", "#faad14", "#f5222d", "#722ed1"],
              },
            ],
          }}
        />
        <FormActions>
          <Button type="submit">
            Save theme
          </Button>
        </FormActions>
      </Form>

      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";
import { toast } from "sonner";

import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";

interface InviteValues {
  personalEmail: string;
  workEmail: string;
}

function acmeDomainValidator(value: string | undefined) {
  if (!value) return "";
  const domain = value.split("@")[1]?.toLowerCase();
  return domain === "acme.com"
    ? ""
    : "Email must be an @acme.com address";
}

export function FormilyStackedValidatorsDemo() {
  const form = useMemo(
    () =>
      createForm<InviteValues>({
        initialValues: { personalEmail: "", workEmail: "" },
      }),
    [],
  );
  const [submitted, setSubmitted] = useState<InviteValues | null>(null);

  return (
    <div className="w-full max-w-sm space-y-4">
      <Form form={form} onSubmit={(values) => {
          setSubmitted({ ...values });
          toast.success("Submitted successfully");
        }}>
        <FormField
          name="personalEmail"
          label="Personal email"
          kind="email"
          componentProps={{ placeholder: "you@example.com" }}
          description="kind only — built-in format: email on blur"
        />
        <FormField
          name="workEmail"
          label="Work email"
          required
          kind="email"
          componentProps={{ placeholder: "you@acme.com" }}
          description="Format first, then @acme.com — try me@gmail.com vs ada@acme.com"
          validator={acmeDomainValidator}
        />
        <FormActions>
          <Button type="submit">
            Send invite
          </Button>
        </FormActions>
      </Form>

      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";
import { toast } from "sonner";

import { Checkbox } from "@/components/f-ui/formily/connects/checkbox";
import { Input } from "@/components/f-ui/formily/connects/input";
import { Select } from "@/components/f-ui/formily/connects/select";
import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";

const REGIONS = [
  { label: "Americas", value: "amer" },
  { label: "EMEA", value: "emea" },
  { label: "APAC", value: "apac" },
];

interface AccountValues {
  accountName: string;
  region: string;
  newsletter: boolean;
}

export function FormilyHorizontalDemo() {
  const form = useMemo(
    () =>
      createForm<AccountValues>({
        initialValues: { accountName: "", region: "amer", newsletter: false },
      }),
    [],
  );
  const [submitted, setSubmitted] = useState<AccountValues | null>(null);

  return (
    <div className="w-full max-w-md space-y-4">
      <Form
        form={form}
        orientation="horizontal"
        labelWidth="9rem"
        colon
        onSubmit={(values) => {
          setSubmitted({ ...values });
          toast.success("Submitted successfully");
        }}
      >
        <FormField
          name="accountName"
          label="Account name"
          required
          description="Shown on invoices"
          component={[Input, { placeholder: "Acme Corp" }]}
        />
        <FormField
          name="region"
          label="Region"
          component={[Select, { options: REGIONS }]}
        />
        <FormField
          name="newsletter"
          label="Subscribe to the newsletter"
          inlineLabel
          component={[Checkbox]}
        />
        <FormActions>
          <Button type="submit">
            Save account
          </Button>
        </FormActions>
      </Form>

      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";
import { toast } from "sonner";

import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";

interface ProfileValues {
  displayName: string;
  bio: string;
}

export function FormilyControlWidthDemo() {
  const form = useMemo(
    () =>
      createForm<ProfileValues>({
        initialValues: { displayName: "", bio: "" },
      }),
    [],
  );
  const [submitted, setSubmitted] = useState<ProfileValues | null>(null);

  return (
    <div className="w-full space-y-4">
      <Form
        form={form}
        orientation="horizontal"
        labelWidth="9rem"
        controlMaxWidth="20rem"
        onSubmit={(values) => {
          setSubmitted({ ...values });
          toast.success("Submitted successfully");
        }}
      >
        <FormField
          name="displayName"
          label="Display name"
          required
          kind="text"
          componentProps={{ placeholder: "Ada Lovelace" }}
          description="Controls cap at 20rem even though the form spans the page"
        />
        <FormField
          name="bio"
          label="Bio"
          kind="textarea"
          componentProps={{ placeholder: "A short introduction", rows: 3 }}
        />
        <FormActions>
          <Button type="submit">
            Save profile
          </Button>
        </FormActions>
      </Form>

      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";
import { toast } from "sonner";

import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormField } from "@/components/f-ui/formily/form-field";
import { FormSection } from "@/components/f-ui/formily/form-section";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";

const TIMEZONES = [
  { label: "UTC", value: "utc" },
  { label: "America/New_York", value: "america/new_york" },
  { label: "Europe/London", value: "europe/london" },
  { label: "Asia/Tokyo", value: "asia/tokyo" },
];

interface SettingsValues {
  displayName: string;
  jobTitle: string;
  bio: string;
  email: string;
  phone: string;
  website: string;
  timezone: string;
  newsletter: boolean;
}

export function FormilySectionsDemo() {
  const form = useMemo(
    () =>
      createForm<SettingsValues>({
        initialValues: {
          displayName: "",
          jobTitle: "",
          bio: "",
          email: "",
          phone: "",
          website: "",
          timezone: "utc",
          newsletter: false,
        },
      }),
    [],
  );
  const [submitted, setSubmitted] = useState<SettingsValues | null>(null);

  return (
    <div className="w-full space-y-4">
      <Form
        form={form}
        orientation="horizontal"
        labelWidth="9rem"
        controlMaxWidth="24rem"
        colon
        onSubmit={(values) => {
          setSubmitted({ ...values });
          toast.success("Submitted successfully");
        }}
      >
        <FormSection legend="Profile">
          <FormField
            name="displayName"
            label="Display name"
            required
            kind="text"
            componentProps={{ placeholder: "Ada Lovelace" }}
          />
          <FormField
            name="jobTitle"
            label="Job title"
            kind="text"
            componentProps={{ placeholder: "Software engineer" }}
          />
          <FormField
            name="bio"
            label="Bio"
            kind="textarea"
            componentProps={{ placeholder: "A short introduction", rows: 3 }}
          />
        </FormSection>

        <FormSection legend="Contact">
          <FormField
            name="email"
            label="Email"
            required
            kind="email"
            componentProps={{ placeholder: "you@example.com" }}
          />
          <FormField
            name="phone"
            label="Phone"
            kind="phone"
            componentProps={{ placeholder: "+1 (555) 000-0000" }}
          />
          <FormField
            name="website"
            label="Website"
            kind="url"
            componentProps={{ placeholder: "https://example.com" }}
          />
        </FormSection>

        <FormSection legend="Preferences">
          <FormField
            name="timezone"
            label="Timezone"
            kind="select"
            componentProps={{ options: TIMEZONES }}
          />
          <FormField
            name="newsletter"
            label="Product updates by email"
            inlineLabel
            kind="checkbox"
          />
        </FormSection>

        <FormActions>
          <Button type="submit">
            Save settings
          </Button>
        </FormActions>
      </Form>

      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";
import { toast } from "sonner";

import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";

interface EmployeeValues {
  firstName: string;
  lastName: string;
  email: string;
  phone: string;
  department: string;
  startDate: Date | null;
  notes: string;
}

const DEPARTMENTS = [
  { label: "Engineering", value: "engineering" },
  { label: "Design", value: "design" },
  { label: "Operations", value: "operations" },
];

export function FormilyTwoColumnDemo() {
  const form = useMemo(
    () =>
      createForm<EmployeeValues>({
        initialValues: {
          firstName: "",
          lastName: "",
          email: "",
          phone: "",
          department: "engineering",
          startDate: null,
          notes: "",
        },
      }),
    [],
  );
  const [submitted, setSubmitted] = useState<EmployeeValues | null>(null);

  return (
    <div className="w-full max-w-3xl space-y-4">
      <Form form={form} onSubmit={(values) => {
          setSubmitted({ ...values });
          toast.success("Submitted successfully");
        }}>
        <div className="grid grid-cols-1 gap-[var(--fui-form-field-gap)] md:grid-cols-2">
          <FormField
            name="firstName"
            label="First name"
            required
            kind="text"
            componentProps={{ placeholder: "Ada" }}
          />
          <FormField
            name="lastName"
            label="Last name"
            required
            kind="text"
            componentProps={{ placeholder: "Lovelace" }}
          />
          <FormField
            name="email"
            label="Work email"
            required
            kind="email"
            componentProps={{ placeholder: "ada@example.com" }}
          />
          <FormField
            name="phone"
            label="Phone"
            kind="phone"
            componentProps={{ placeholder: "+1 (555) 000-0000" }}
          />
          <FormField
            name="department"
            label="Department"
            kind="select"
            componentProps={{ options: DEPARTMENTS }}
          />
          <FormField name="startDate" label="Start date" kind="date" />
          <div className="md:col-span-2">
            <FormField
              name="notes"
              label="Onboarding notes"
              kind="textarea"
              componentProps={{
                placeholder: "Equipment requests, buddy assignment, …",
                rows: 3,
              }}
            />
          </div>
        </div>
        <FormActions>
          <Button type="submit">
            Create employee
          </Button>
        </FormActions>
      </Form>

      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";
import { toast } from "sonner";

import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormField } from "@/components/f-ui/formily/form-field";
import { FormPanel } from "@/components/f-ui/formily/form-panel";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";

interface OrganizationValues {
  legalName: string;
  taxId: string;
  billingEmail: string;
  supportPhone: string;
  invoicePrefix: string;
  defaultCurrency: string;
}

const CURRENCIES = [
  { label: "USD", value: "usd" },
  { label: "EUR", value: "eur" },
  { label: "GBP", value: "gbp" },
];

export function FormilyCardSectionsDemo() {
  const form = useMemo(
    () =>
      createForm<OrganizationValues>({
        initialValues: {
          legalName: "",
          taxId: "",
          billingEmail: "",
          supportPhone: "",
          invoicePrefix: "INV",
          defaultCurrency: "usd",
        },
      }),
    [],
  );
  const [submitted, setSubmitted] = useState<OrganizationValues | null>(null);

  return (
    <div className="w-full max-w-2xl space-y-4">
      <Form form={form} onSubmit={(values) => {
          setSubmitted({ ...values });
          toast.success("Submitted successfully");
        }}>
        <FormPanel
          title="Company"
          description="Legal identity shown on invoices"
        >
          <FormField
            name="legalName"
            label="Legal name"
            required
            kind="text"
            componentProps={{ placeholder: "Acme Corporation" }}
          />
          <FormField
            name="taxId"
            label="Tax ID"
            kind="text"
            componentProps={{ placeholder: "12-3456789" }}
          />
        </FormPanel>

        <FormPanel
          title="Billing contacts"
          description="Used for invoices and payment notices"
        >
          <FormField
            name="billingEmail"
            label="Billing email"
            required
            kind="email"
            componentProps={{ placeholder: "billing@example.com" }}
          />
          <FormField
            name="supportPhone"
            label="Support phone"
            kind="phone"
            componentProps={{ placeholder: "+1 (555) 000-0000" }}
          />
        </FormPanel>

        <FormPanel
          title="Defaults"
          description="Applied to new invoices"
        >
          <FormField
            name="invoicePrefix"
            label="Invoice prefix"
            kind="text"
            componentProps={{ placeholder: "INV" }}
          />
          <FormField
            name="defaultCurrency"
            label="Currency"
            kind="select"
            componentProps={{ options: CURRENCIES }}
          />
        </FormPanel>

        <FormActions>
          <Button type="submit">
            Save organization
          </Button>
        </FormActions>
      </Form>

      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useMemo, useState } from "react";
import { toast } from "sonner";

import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormPanel } from "@/components/f-ui/formily/form-panel";
import { FormSection } from "@/components/f-ui/formily/form-section";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { SchemaField } from "@/components/f-ui/formily/schema-field";
import { Button } from "@/components/ui/button";

const ROLE_OPTIONS = [
  { label: "Member", value: "member" },
  { label: "Admin", value: "admin" },
];

const basicsSchema = {
  type: "object",
  properties: {
    email: {
      type: "string",
      title: "Email",
      required: true,
      format: "email",
      "x-decorator": "FormItem",
      "x-component": "EmailInput",
      "x-component-props": { placeholder: "you@example.com" },
    },
    role: {
      type: "string",
      title: "Role",
      "x-decorator": "FormItem",
      "x-component": "Select",
      "x-component-props": { options: ROLE_OPTIONS },
    },
  },
};

const accessSchema = {
  type: "object",
  properties: {
    adminCode: {
      type: "string",
      title: "Admin code",
      description: "Visible and required only for admins",
      "x-decorator": "FormItem",
      "x-component": "Input",
      "x-component-props": { placeholder: "1234", autoComplete: "off" },
      "x-reactions": {
        dependencies: ["role"],
        fulfill: {
          state: {
            visible: '{{$deps[0] === "admin"}}',
            required: '{{$deps[0] === "admin"}}',
          },
        },
      },
    },
  },
};

interface PanelSchemaValues {
  email: string;
  role: string;
  adminCode?: string;
}

export function FormilyPanelSchemaDemo() {
  const form = useMemo(
    () =>
      createForm<PanelSchemaValues>({
        initialValues: { email: "", role: "member" },
      }),
    [],
  );
  const [submitted, setSubmitted] = useState<PanelSchemaValues | null>(null);

  return (
    <div className="w-full max-w-lg space-y-4">
      <Form
        form={form}
        onSubmit={(values) => {
          setSubmitted({ ...values });
          toast.success("Submitted successfully");
        }}
      >
        <FormSection legend="Account">
          <FormPanel
            title="Basics"
            description="FormPanel content owns field rhythm — no hand-rolled gap wrapper."
          >
            <SchemaField schema={basicsSchema} />
          </FormPanel>
        </FormSection>
        <FormSection legend="Privileges">
          <FormPanel variant="plain">
            <SchemaField schema={accessSchema} />
          </FormPanel>
        </FormSection>
        <FormActions>
          <Button type="submit">Submit</Button>
        </FormActions>
      </Form>

      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}