フィールド

{
  "input": {
    "name": "title",
    "required": true,
    "type": "text",
    "minLength": 1,
    "maxLength": 120
  },
  "messages": {
    "valueMissing": "Enter a title",
    "tooShort": "Enter a title",
    "tooLong": "Use 120 characters or fewer"
  },
  "secret": false
}

// src/routes/talks/[id]/edit/_parts/edit-talk-form.tsx
'use client';

import { useForm } from '@k8ordo/form';
import type { FormFields } from '@k8ordo/form';
import { useActionState } from 'react';

import { updateTalk } from './actions';

type Props = {
  fields: FormFields<'title', never>;
  talk: { title: string };
};

export function EditTalkForm({ fields, talk }: Props) {
  const [state, formAction] = useActionState(updateTalk, {});
  const form = useForm(fields, state);
  const title = form.field('title');

  return (
    <form {...form.props} action={formAction}>
      <label>
        Title
        <input defaultValue={talk.title} {...title.input} />
      </label>
      {title.error !== undefined && <p>{title.error}</p>}
      <button type="submit">Save</button>
    </form>
  );
}

// src/routes/profile/_parts/profile-schema.ts
import * as z from 'zod';

export const profileSchema = z.object({
  name: z.string().min(1, 'Enter your name'),
  address: z.object({
    city: z.string().min(1, 'Enter a city'),
    postalCode: z
      .string()
      .regex(/^[0-9]{3}-[0-9]{4}$/u, 'Use the 123-4567 format'),
  }),
});

// src/routes/profile/_parts/profile-form.tsx
'use client';

import { useForm } from '@k8ordo/form';
import type { FormFields } from '@k8ordo/form';
import { useActionState } from 'react';

import { saveProfile } from './actions';

type Props = {
  fields: FormFields<'name' | 'address.city' | 'address.postalCode', never>;
};

export function ProfileForm({ fields }: Props) {
  const [state, formAction] = useActionState(saveProfile, {});
  const form = useForm(fields, state);
  const name = form.field('name');
  const city = form.field('address.city');
  const postalCode = form.field('address.postalCode');

  return (
    <form {...form.props} action={formAction}>
      <input {...name.input} aria-label="Name" />
      {name.error !== undefined && <p>{name.error}</p>}
      <input {...city.input} aria-label="City" />
      {city.error !== undefined && <p>{city.error}</p>}
      <input {...postalCode.input} aria-label="Postal code" />
      {postalCode.error !== undefined && <p>{postalCode.error}</p>}
      <button type="submit">Save</button>
    </form>
  );
}

// src/routes/orders/new/_parts/order-schema.ts
import * as z from 'zod';

export const orderSchema = z.object({
  items: z
    .array(
      z.object({
        name: z.string().min(1, 'Enter an item'),
        quantity: z.coerce
          .number('Enter a quantity')
          .int('Use a whole number')
          .min(1, 'Order at least one'),
      }),
    )
    .min(1, 'Add at least one item')
    .max(10),
});

// src/routes/orders/new/_parts/order-form.tsx
'use client';

import { useForm } from '@k8ordo/form';
import type { FormFields } from '@k8ordo/form';
import { useActionState } from 'react';

import { placeOrder } from './actions';

type Props = {
  fields: FormFields<never, 'items'>;
};

export function OrderForm({ fields }: Props) {
  const [state, formAction] = useActionState(placeOrder, {});
  const form = useForm(fields, state);
  const items = form.array('items');

  return (
    <form {...form.props} action={formAction}>
      {items.rows.map((row) => {
        const name = row.field('name');
        const quantity = row.field('quantity');
        return (
          <fieldset key={row.key}>
            <legend>{`Item ${String(row.index + 1)}`}</legend>
            <input {...name.input} aria-label="Item" />
            {name.error !== undefined && <p>{name.error}</p>}
            <input {...quantity.input} aria-label="Quantity" />
            {quantity.error !== undefined && <p>{quantity.error}</p>}
            {items.canRemove && (
              <button onClick={row.remove} type="button">
                Remove
              </button>
            )}
          </fieldset>
        );
      })}
      {items.error !== undefined && <p>{items.error}</p>}
      {items.canAdd && (
        <button onClick={items.add} type="button">
          Add an item
        </button>
      )}
      <button type="submit">Order</button>
    </form>
  );
}

// src/routes/signup/_parts/plan-schema.ts
import * as z from 'zod';

export const planSchema = z.object({
  region: z.enum(['asia', 'europe'], 'Choose a region'),
  plan: z.enum(['free', 'team'], 'Choose a plan'),
});

// src/routes/signup/_parts/plan-form.tsx
'use client';

import { useForm } from '@k8ordo/form';
import type { FormFields } from '@k8ordo/form';
import { useActionState } from 'react';

import { choosePlan } from './actions';

const PLANS = ['free', 'team'] as const;

type Props = {
  fields: FormFields<'region' | 'plan', never>;
};

export function PlanForm({ fields }: Props) {
  const [state, formAction] = useActionState(choosePlan, {});
  const form = useForm(fields, state);
  const region = form.field('region');
  const plan = form.field('plan');

  return (
    <form {...form.props} action={formAction}>
      <select {...region.input} aria-label="Region">
        <option value="">Choose a region</option>
        <option value="asia">Asia</option>
        <option value="europe">Europe</option>
      </select>
      {region.error !== undefined && <p>{region.error}</p>}

      <fieldset>
        <legend>Plan</legend>
        {PLANS.map((option) => (
          <label key={option}>
            <input
              defaultChecked={state.values?.plan === option}
              name={plan.input.name}
              required={plan.input.required}
              type="radio"
              value={option}
            />
            {option}
          </label>
        ))}
      </fieldset>
      {plan.error !== undefined && <p>{plan.error}</p>}

      <button type="submit">Continue</button>
    </form>
  );
}

// src/routes/signup/_parts/preferences-schema.ts
import * as z from 'zod';

export const preferencesSchema = z.object({
  newsletter: z.boolean(),
  terms: z.literal(true, 'Agree to the terms to continue'),
  topics: z
    .array(z.enum(['react', 'css', 'a11y']))
    .min(2, 'Pick at least two topics'),
});

// src/routes/signup/_parts/preferences-form.tsx
'use client';

import { useForm } from '@k8ordo/form';
import type { FormFields } from '@k8ordo/form';
import { useActionState } from 'react';

import { savePreferences } from './actions';

const TOPICS = ['react', 'css', 'a11y'] as const;

type Props = {
  fields: FormFields<'newsletter' | 'terms' | 'topics', never>;
};

export function PreferencesForm({ fields }: Props) {
  const [state, formAction] = useActionState(savePreferences, {});
  const form = useForm(fields, state);
  const newsletter = form.field('newsletter');
  const terms = form.field('terms');
  const topics = form.field('topics');
  const echoed = state.values?.topics;
  const checked = Array.isArray(echoed) ? echoed : [];

  return (
    <form {...form.props} action={formAction}>
      <label>
        <input {...newsletter.input} />
        Send me the newsletter
      </label>

      <label>
        <input {...terms.input} />
        I agree to the terms
      </label>
      {terms.error !== undefined && <p>{terms.error}</p>}

      <fieldset>
        <legend>Topics</legend>
        {TOPICS.map((option) => (
          <label key={option}>
            <input
              defaultChecked={checked.includes(option)}
              name={topics.input.name}
              type="checkbox"
              value={option}
            />
            {option}
          </label>
        ))}
      </fieldset>
      {topics.error !== undefined && <p>{topics.error}</p>}

      <button type="submit">Save</button>
    </form>
  );
}

// src/routes/profile/_parts/avatar-schema.ts
import * as z from 'zod';

export const avatarSchema = z.object({
  avatar: z
    .file('Choose an image')
    .mime(['image/png', 'image/jpeg'])
    .max(1_000_000, 'Use an image of 1 MB or less'),
});

// src/routes/posts/new/_parts/post-form.tsx
'use client';

import { HiddenValue, useForm } from '@k8ordo/form';
import type { FormFields } from '@k8ordo/form';
import { useActionState, useState } from 'react';

import { createPost } from './actions';
import { RichTextEditor } from './rich-text-editor';

type Props = {
  fields: FormFields<'title' | 'body', never>;
};

export function PostForm({ fields }: Props) {
  const [state, formAction] = useActionState(createPost, {});
  const form = useForm(fields, state);
  const [body, setBody] = useState('');
  const title = form.field('title');
  const bodyField = form.field('body');

  return (
    <form {...form.props} action={formAction}>
      <input {...title.input} aria-label="Title" />
      {title.error !== undefined && <p>{title.error}</p>}
      <RichTextEditor onChange={setBody} value={body} />
      <HiddenValue name="body" value={body} />
      {bodyField.error !== undefined && <p>{bodyField.error}</p>}
      <button type="submit">Publish</button>
    </form>
  );
}