A form wrapper that accepts an action prop and handles submission via the Async React form action pattern.
childrenReactNodeaction?((formData: FormData) => void | Promise<void>)|string| Prop | Type | Default |
|---|---|---|
children | ReactNode | - |
action? | ((formData: FormData) => void | Promise<void>)|string | - |
import { Form } from '@k8ordo/ui';<Form
action={async (formData) => {
const name = formData.get('name');
await save(name);
}}
>
<FormControl
label="Name"
renderInput={(props) => <TextField {...props} name="name" />}
/>
<Button type="submit">Submit</Button>
</Form>const [message, formAction] = useActionState(
async (_prev, formData) => {
const name = formData.get('name');
await sleep(1000);
return `Hello, ${name}!`;
},
'',
);
return (
<Form action={formAction}>
<FormControl
label="Name"
renderInput={(props) => <TextField {...props} name="name" />}
/>
<Button type="submit">Submit</Button>
<p>{message}</p>
</Form>
);