v0.0.3

Documentation version

Open files in your editor

Project folderVersion

On a Mac, right-click the folder in Finder, hold Option, and choose Copy as Pathname.On Windows, hold Shift, right-click the folder, and choose Copy as path, then delete the quote marks.

Open files in

ComponentsLumos 0.0.2NewOpen component

Form

A form that posts, and says what happened when it does.

Form is the <form> and the wiring around it. It posts where you point it, swaps the fields for a message when that works, and shows one beneath them when it does not — so the states a form needs are there before you write any of them.

astro

<Form action="/api/contact" successMessage="Thanks — we will be in touch.">
  <Input variant="email" required />
  <Textarea label="Message" required />
  <Button type="submit">Send</Button>
</Form>

<Form action="/api/contact" successMessage="Thanks — we will be in touch.">
  <Input variant="email" required />
  <Textarea label="Message" required />
  <Button type="submit">Send</Button>
</Form>

Props

Prop	Type	Default	What it does
`render`	`boolean`	`true`	Set to `false` to skip this component and everything inside it.
`name`	`string`	None	What the form is called, which is what it submits under.
`action`	`string`	None	Where it posts. Left unset, it sends nothing and reports success.
`successMessage`	`string`	`"Thanks — we will be in touch."`	Shown in place of the fields once it has sent.
`errorMessage`	`string`	`"That did not send. Please try again."`	Shown beneath the fields when it could not send.

It renders a real <form>, so anything a form takes — method, enctype, target — passes straight through.

Why the message matters

A form that clears itself and says nothing has told the reader either that it worked or that it lost their message, and they cannot tell which. Both messages are announced to a screen reader when they appear, so the answer arrives whether or not the reader is watching that part of the page.