What each control submits

The rules match native inputs: a disabled control submits nothing, required blocks submission while the control is empty, and a form reset restores the initial value.

Control	Submits	Notes
`TextInput, Textarea, SearchBox`	The text	Native input; every input prop passes through.
`NumberInput`	Plain decimal string, such as "1234.5"	No digit grouping, always Latin digits. Empty submits "".
`Select`	The selected value	Empty submits "".
`Dropdown`	The selected value	With multiple, one entry per value under the same name. Empty single submits "".
`Checkbox`	value, or "on"	Unchecked submits nothing. Give a group one name and read it with getAll.
`RadioGroup`	The selected value	No selection submits nothing.
`Switch`	"on"	Off submits nothing.
`Slider`	The value	A range submits name[] once per thumb; Radix appends the brackets.
`Rating`	Number string, such as "4" or "3.5"	Unrated submits "0".
`TagInput`	One entry per tag	No tags submits nothing. The uncommitted draft text never submits.
`InputOTP`	The entered code	Native input under the slots.
`DatePicker`	Gregorian YYYY-MM-DD	Even while Hijri is displayed. Empty submits "".
`DateRangePicker`	Gregorian YYYY-MM-DD under startName and endName	Each end submits separately.
`FileUpload`	Every listed file (multipart)	The native input mirrors files, dropped ones included. A reset leaves files to you.
`ContentSwitcher, Toggle`	Nothing	View switchers, not form controls. For a form choice, use RadioGroup or Checkbox.

Multiple values

TagInput, Dropdown with multiple, and Checkbox groups submit one FormData entry per value under the exact name you pass, like a native <select multiple>. Read them with formData.getAll(name). PHP and Laravel only build an array from names ending in [], so pass name="tags[]" there.

// 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']]);

Plain forms

Wrap the controls in a <form> and read FormData in the submit handler. This is the contract every integration below builds on.

<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>

Inertia <Form>

Inertia builds its payload from new FormData(form), so named controls need no extra wiring. Its errors map straight onto each control’s error and errorMessage props.

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>  );}

A full reset() fires a reset event that the controls listen for. A per-field reset, such as resetOnSuccess={["name"]}, fires no event, so controls that keep their own state (date pickers, TagInput, Dropdown, Rating, NumberInput, InputOTP) keep their current value. Reset the whole form, or control those fields yourself.

React Router actions

React Router’s <Form> posts the same FormData to the route action. Read it with request.formData() and return validation errors from the action.

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>  );}

Server actions

Pass a server action to the form’s action prop. useActionState returns the action’s result, so the server’s field errors flow back into the controls.

// 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>  );}

ModalContent takes title and footer props, so the submit button sits in the footer, outside the <form>. Three rules keep that working:

Give the form an id and the footer button form={formId}. The button submits that form, and Enter in a field submits through it.
Pass the pending state to the button’s loading prop. A loading button is disabled, so a second click or Enter can’t send the form twice.
Show a server error that belongs to no field in an InlineAlert above the fields, and each field error on its field.

Inertia <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.']);

See it live

Server action

// 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>  );}

See it live

The pending state lives outside the form because the button does. Close the Modal on success: Inertia calls onSuccess only when the server returns no errors. The title, description, and footer props need @dev-dga/react 1.6.0 or later.

Server validation errors

Every field takes error (the invalid state) and errorMessage (the text below the field). Together they set aria-invalid and point aria-describedby at the message, so screen readers announce the server’s message with the field.

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

Set error and errorMessage together. errorMessage without error stays hidden, and error alone marks the field without telling the user why.

Dates from the server

Servers send dates as YYYY-MM-DD strings. Convert them with parseDateOnly, which builds a local-midnight Date and throws a RangeError on any other shape. new Date("2026-10-20") parses as UTC, so anywhere west of UTC it shows October 19.

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.

#What each control submits

#Multiple values

#Plain forms

#Inertia <Form>

#React Router actions

#Server actions

#Forms in a Modal

#Server validation errors

#Dates from the server

What each control submits

Multiple values

Plain forms

Inertia <Form>

React Router actions

Server actions

Forms in a Modal

Server validation errors

Dates from the server