Form (einfach)

React Hook Form + Zod + shadcn Form ist der Atlas-Standard. Hier eine reduzierte Variante mit Server-Action über useActionState — bevorzugt für 1-2-Felder-Forms (Magic-Link, Schnell-Inputs).

Atlas Spec

Live Demo

Mock-Server-Action mit 800–1500ms Delay, 15% Random-Fail-Rate für Error-State-Demo.

Pattern

React 19 useActionState für Server-Action-State. Form-Submit triggert das pending+result-Lifecycle automatisch.

VehicleForm.tsxtsx

'use client'

import { useActionState } from 'react'
import { submitVehicleForm } from './actions'

export function VehicleForm() {
  const [state, action, pending] = useActionState(submitVehicleForm, null)

  return (
    <form action={action} className="space-y-3">
      <Input name="frameNumber" required />
      <Button type="submit" disabled={pending}>
        {pending ? 'Speichern …' : 'Speichern'}
      </Button>
      {state?.ok === false && <FormError msg={state.error} />}
    </form>
  )
}