يرسل كل عنصر كما يرسل الحقل الأصلي.

// Next.js server action or React Router actionformData.getAll('skills'); // ["react", "laravel"]// Laravel reads arrays only from names ending in []<TagInput label="Skills" name="skills[]" /><Dropdown multiple label="Cities" name="cities[]">…</Dropdown>// Laravel: $request->validate(['skills' => ['array'], 'skills.*' => ['string']]);

<form  onSubmit={(event) => {    event.preventDefault();    const data = new FormData(event.currentTarget);    data.get('fullName'); // "Noura"    data.get('visitDate'); // "2026-10-20"    data.getAll('skills'); // ["react", "laravel"]  }}>  <TextInput label="Full name" name="fullName" required />  <DatePicker label="Visit date" name="visitDate" required />  <TagInput label="Skills" name="skills" />  <Button type="submit">Submit</Button></form>

import { Form } from '@inertiajs/react';import { Button, DatePicker, Select, SelectItem, TextInput, parseDateOnly } from '@dev-dga/react';export default function EditVisit({ visit }: { visit: Visit }) {  return (    <Form action={`/visits/${visit.id}`} method="put">      {({ errors, processing }) => (        <>          <TextInput            label="Name"            name="name"            defaultValue={visit.name}            error={!!errors.name}            errorMessage={errors.name}          />          <Select label="City" name="city" defaultValue={visit.city} error={!!errors.city} errorMessage={errors.city}>            <SelectItem value="riyadh">Riyadh</SelectItem>            <SelectItem value="jeddah">Jeddah</SelectItem>          </Select>          <DatePicker            label="Visit date"            name="date"            defaultValue={visit.date ? parseDateOnly(visit.date) : null}            error={!!errors.date}            errorMessage={errors.date}          />          <Button type="submit" disabled={processing}>            Save          </Button>        </>      )}    </Form>  );}

import { Form, useActionData, type ActionFunctionArgs } from 'react-router';import { Button, DatePicker } from '@dev-dga/react';export async function action({ request }: ActionFunctionArgs) {  const data = await request.formData();  const date = data.get('date'); // "2026-10-20", or "" when empty  if (!date) return { errors: { date: 'Pick a visit date.' } };  // save…  return { errors: {} };}export default function NewVisit() {  const result = useActionData<typeof action>();  return (    <Form method="post">      <DatePicker        label="Visit date"        name="date"        error={!!result?.errors.date}        errorMessage={result?.errors.date}      />      <Button type="submit">Save</Button>    </Form>  );}

// app/visits/actions.ts'use server';type State = { errors: { date?: string } };export async function saveVisit(_prev: State, formData: FormData): Promise<State> {  const date = formData.get('date');  if (typeof date !== 'string' || date === '') return { errors: { date: 'Pick a visit date.' } };  // save…  return { errors: {} };}// app/visits/visit-form.tsx'use client';import { useActionState } from 'react';import { Button, DatePicker } from '@dev-dga/react';import { saveVisit } from './actions';export function VisitForm() {  const [state, formAction, pending] = useActionState(saveVisit, { errors: {} });  return (    <form action={formAction}>      <DatePicker        label="Visit date"        name="date"        error={!!state.errors.date}        errorMessage={state.errors.date}      />      <Button type="submit" disabled={pending}>        Save      </Button>    </form>  );}

import { useId, useState } from 'react';import { Form } from '@inertiajs/react';import {  Button,  InlineAlert,  Modal,  ModalClose,  ModalContent,  ModalTrigger,  TextInput,} from '@dev-dga/react';export function RenameTeam({ team }: { team: Team }) {  const formId = useId();  const [open, setOpen] = useState(false);  const [processing, setProcessing] = useState(false);  return (    <Modal open={open} onOpenChange={setOpen}>      <ModalTrigger asChild>        <Button>Rename team</Button>      </ModalTrigger>      <ModalContent        title="Rename team"        footer={          <>            <ModalClose asChild>              <Button variant="outline">Cancel</Button>            </ModalClose>            <Button type="submit" form={formId} loading={processing}>              Save            </Button>          </>        }      >        <Form          id={formId}          action={`/teams/${team.id}`}          method="patch"          onStart={() => setProcessing(true)}          onFinish={() => setProcessing(false)}          onSuccess={() => setOpen(false)}        >          {({ errors }) => (            <>              {errors.form && <InlineAlert type="destructive" title={errors.form} live="polite" />}              <TextInput                label="Team name"                name="name"                defaultValue={team.name}                required                error={!!errors.name}                errorMessage={errors.name}              />            </>          )}        </Form>      </ModalContent>    </Modal>  );}// Laravel: return back()->withErrors(['form' => 'This name is already in use.']);

// app/teams/actions.ts'use server';export type RenameState = { error?: string; errors: { name?: string } };export async function renameTeam(_prev: RenameState, formData: FormData): Promise<RenameState> {  const name = formData.get('name');  if (typeof name !== 'string' || name.trim() === '') return { errors: { name: 'Enter a team name.' } };  // save… on a non-field failure: return { error: 'This name is already in use.', errors: {} };  return { errors: {} };}// app/teams/rename-team.tsx'use client';import { useActionState, useId, useState } from 'react';import {  Button,  InlineAlert,  Modal,  ModalClose,  ModalContent,  ModalTrigger,  TextInput,} from '@dev-dga/react';import { renameTeam, type RenameState } from './actions';export function RenameTeam() {  const formId = useId();  const [open, setOpen] = useState(false);  const [state, formAction, isPending] = useActionState(    async (prev: RenameState, formData: FormData) => {      const next = await renameTeam(prev, formData);      if (!next.error && !next.errors.name) setOpen(false);      return next;    },    { errors: {} },  );  return (    <Modal open={open} onOpenChange={setOpen}>      <ModalTrigger asChild>        <Button>Rename team</Button>      </ModalTrigger>      <ModalContent        title="Rename team"        footer={          <>            <ModalClose asChild>              <Button variant="outline">Cancel</Button>            </ModalClose>            <Button type="submit" form={formId} loading={isPending}>              Save            </Button>          </>        }      >        <form id={formId} action={formAction}>          {state.error && <InlineAlert type="destructive" title={state.error} live="polite" />}          <TextInput            label="Team name"            name="name"            required            error={!!state.errors.name}            errorMessage={state.errors.name}          />        </form>      </ModalContent>    </Modal>  );}

<TextInput  label="National ID"  name="nationalId"  error={!!errors.nationalId}  errorMessage={errors.nationalId}/><Dropdown label="City" name="city" error={!!errors.city} errorMessage={errors.city}>  …</Dropdown>

import { DatePicker, parseDateOnly } from '@dev-dga/react';// visit.date arrives as "2026-10-20" (or null)const visitDate = visit.date ? parseDateOnly(visit.date) : null;<DatePicker label="Visit date" name="visitDate" defaultValue={visitDate} />;// Avoid: new Date(visit.date) parses as UTC and shows October 19 west of UTC.