Form Primitive
Form is a Starwind Runtime primitive in the field-control-coordinator contract family.
Anatomy
Use the Astro primitive adapter to render Form anatomy with the Runtime wiring included.
---import { Form } from "@starwind-ui/astro/form";---
<Form.Root> <Form.ErrorSummary>Please fix the highlighted fields.</Form.ErrorSummary></Form.Root>Use the React primitive adapter when Form state participates in React rendering.
import { Form } from "@starwind-ui/react/form";
export function Example() { return ( <Form.Root> <Form.ErrorSummary>Please fix the highlighted fields.</Form.ErrorSummary> </Form.Root> );}Render the Form data-sw-* contract yourself, then initialize createForm.
<form data-sw-form data-slot="form"> <div data-sw-form-error-summary data-slot="form-error-summary" role="status" aria-live="polite" aria-atomic="true" hidden>Please fix the highlighted fields.</div></form>
<script type="module"> import { createForm } from "@starwind-ui/runtime/form";
const root = document.querySelector("[data-sw-form]"); if (root) { createForm(root); }</script>API Reference
Root
The main element that owns the Form Runtime instance.
- Default element
- form
- Discovery hook
- data-sw-form
- Role
- -
Props
Prop Type Default Toggle
data-error-visibility FormValidationTiming -
- Description
- Configures the data error visibility option for the Root part.
- Kind
- option
- Targets
- root
- Full type
- FormValidationTiming
data-revalidation-timing FormValidationTiming -
- Description
- Configures the data revalidation timing option for the Root part.
- Kind
- option
- Targets
- root
- Full type
- FormValidationTiming
data-validation-timing FormValidationTiming -
- Description
- Configures the data validation timing option for the Root part.
- Kind
- option
- Targets
- root
- Full type
- FormValidationTiming
errorVisibility FormValidationTiming -
- Description
- Configures the error visibility option for the Root part.
- Kind
- option
- Targets
- root
- Full type
- FormValidationTiming
revalidationTiming FormValidationTiming -
- Description
- Configures the revalidation timing option for the Root part.
- Kind
- option
- Targets
- root
- Full type
- FormValidationTiming
validationTiming FormValidationTiming -
- Description
- Configures the validation timing option for the Root part.
- Kind
- option
- Targets
- root
- Full type
- FormValidationTiming
Data Attributes
Runtime hooks
Attribute Value Description
data-sw-form - Marks the Root part so Starwind Runtime can find it.
Metadata
Attribute Value Description
data-slot form Identifies Root metadata for styling and selectors.
data-error-visibility - Reflects the error visibility prop on the Root part.
data-revalidation-timing - Reflects the revalidation timing prop on the Root part.
data-validation-timing - Reflects the validation timing prop on the Root part.
Error Summary
Summary of validation errors for Form.
- Default element
- div
- Discovery hook
- data-sw-form-error-summary
- Role
- -
Data Attributes
Runtime hooks
Attribute Value Description
data-sw-form-error-summary - Marks the Error Summary part so Starwind Runtime can find it.
Metadata
Attribute Value Description
data-slot form-error-summary Identifies Error Summary metadata for styling and selectors.
Runtime API
- Factory
createForm- Import
@starwind-ui/runtime/form- Root hook
- root
data-sw-form - Option props
- -
Related Styled Components
Component Relationship
Form Direct primitive