Form
stableA form with declarative validation built on native ValidityState.
Basic usage
Examples
Login form
A complete login form with email, password, and validation messages.
Validation states
Form coordinates labels, controls and native ValidityState messages.
Features
- Built-in and custom matchers.
- Accessible error messages.
Installation
pnpm dlx structyl add formAPI Reference
Form.Root
The form element; tracks validity per field.
| Prop | Type | Default |
|---|---|---|
| onClearServerErrors | () => voidCalled on change to clear server-side errors. | — |
Form.Field
Wraps a control with its label and messages.
| Prop | Type | Default |
|---|---|---|
| name | stringField name — links label, control and messages. | — |
| serverInvalid | booleanForce-mark the field invalid from server validation. | — |
Form.Label
Label bound to the field control.
| Prop | Type | Default |
|---|---|---|
| asChild | booleanMerge props onto the immediate child instead of rendering a default element. | false |
Form.Control
The input. Reports native ValidityState.
| Prop | Type | Default |
|---|---|---|
| asChild | booleanMerge props onto the immediate child instead of rendering a default element. | false |
Form.Message
A validation message, shown when its match fails.
| Prop | Type | Default |
|---|---|---|
| match | ValidityMatcher | functionA built-in matcher (e.g. 'valueMissing') or a custom predicate. | — |
| forceMatch | booleanAlways render the message. | — |
Form.Submit
A submit button.
| Prop | Type | Default |
|---|---|---|
| asChild | booleanMerge props onto the immediate child instead of rendering a default element. | false |