Form

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Coordinate submit validation and server errors across several Fields. onFormSubmit collects values from named Fields. For the raw native submission values, read FormData in onSubmit. The preview's server error button only changes local state.

Don't assume async validation always blocks submission. Handle real requests, permissions, and duplicate-submission prevention in the product.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Form → Field / Fieldset + submit / reset + result status

Keyboard and accessibility

Enter or the submit button validates the form and moves focus to the first invalid input. Editing an input clears its server error. Reset restores the initial values.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Form, Field, Button } from '@surflane/ui'

<Form errors={serverErrors} onFormSubmit={savePreview}>
  <Field.Root name='project'>
    <Field.Label>Project name</Field.Label>
    <Field.Control required />
    <Field.Error />
  </Field.Root>
  <Button type='submit'>Save preview</Button>
  <Button type='reset' variant='outline'>
    Reset
  </Button>
</Form>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens