# Form
Put server-side errors back onto the fields they came from. (Custom element.)
Reference: https://timeless.build/docs/components/form/
> **Choosing between components.** Reach for Form only when errors arrive from somewhere the browser cannot see — a server response, an async uniqueness check. Everything a `required`, a `type="email"`, or a `pattern` can decide is already decided by native constraint validation, and adding Form does not change it.
> **Markup you author.** Author an empty `error` part inside each field wrapper. Form resolves it as the single `error` part in the nearest wrapper holding no other named control, which is the shape `.ui-field`, `.ui-choice-group`, and `.ui-fieldset` already produce, then writes the message and points the field’s `aria-describedby` at it. A field with no wrapper gets no error element rather than someone else’s.
## Markup
```html
```
## Install
```js
import '@timelessui/components/css/tokens.css'
import '@timelessui/components/css/core/form.css'
import '@timelessui/components/css/core/forms.css'
import '@timelessui/components/css/core/button.css'
import '@timelessui/components/css/themes/atmosphere/tokens.css'
import '@timelessui/components/css/themes/atmosphere/forms.css'
import '@timelessui/components/css/themes/atmosphere/button.css'
import '@timelessui/components/register/ui-form'
```
A `register/` import is a side effect: it defines the element as the module evaluates, so it
has to run in code the browser loads. To register explicitly instead — to control the timing,
or to define into another window — call the function from the matching `define/` entry point,
which registers nothing on its own:
```js
import { defineFormElement } from '@timelessui/components/define/ui-form'
defineFormElement()
```
## Consumer wiring
This example needs the following plain JavaScript beyond custom-element registration.
```js
const form = document.querySelector('ui-form')
if (form) {
document.getElementById('workspace-save')?.addEventListener('click', () => {
form.setErrors({
slug: 'That workspace address is already taken.',
owner: 'No account exists for this address.',
})
})
document.getElementById('workspace-clear')?.addEventListener('click', () => form.clearErrors())
}
```
## Anatomy
Parts are authored in your own markup and identified by the selector below. Required parts
must be present for the component to work. Private `data-ui-internal-*` hooks are written by
the runtime and must never be authored.
****
| Part | Required | Selector | Purpose |
| --- | --- | --- | --- |
| `form` | Yes | `form` | The native `