Skip to content
helixui

Form

Form

<Form
  onSubmit={(e) => { e.preventDefault(); /* ... */ }}
  validationErrors={{ email: 'This email is already taken' }}
>
  <TextInput name="email" label="Email" isRequired />
  <Button type="submit">Sign up</Button>
</Form>

Install: @helixui/core

import { Form } from '@helixui/core'

status: stable · since: 0.1.0

Tags: form, validation, submit, rac

Anatomy

<Form>
  Field…
  Field…
  [ Cancel ] [ Submit ]
</Form>

Layout

  • display — block
  • width — fill
  • height — content
  • intrinsicSize — native form element; layout by children
  • stackable — true
  • fullBleed — false

Visual

A <form> wrapper with no inherent visuals. Provides a validationErrors prop that surfaces server validation against fields by name.

Props

NameTypeDefaultDescription
validationErrorsRecord<string, string | string[]>—Server-side validation errors keyed by field name. Forwarded to each FieldError.
onSubmit(e: FormEvent) => void—Submit handler. Native form behavior unless e.preventDefault().
...restFormHTMLAttributes<HTMLFormElement>—All native form attributes.

Tokens used

space.5

Accessibility

Notes

  • Use <Form> instead of <form> to get react-aria’s coordinated validation handling.
  • Server errors via validationErrors are surfaced to the corresponding fields automatically.

Composes with

ComponentRelationNote
FieldchildEach control is wrapped in a Field.
TextInputchildRAC inputs accept label/description directly.
ButtonchildSubmit button at the end.
Textareasibling
Checkboxsibling
RadioGroupsibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

login form

“email + password + submit”

<Form onSubmit={handleSubmit}>
  <TextInput name="email" label="Email" />
  <TextInput name="password" label="Password" type="password" />
  <Button type="submit">Sign in</Button>
</Form>