Form Skeleton

Overview

Form.Skeleton generates a loading placeholder for a form. fields accepts either a plain number of skeleton rows, or a Zod object schema — when a schema is passed, the field count is read from its shape automatically.

import { Form } from '@letar/forms'

// Fixed number of skeleton rows
<Form.Skeleton fields={3} />

// Auto-detect field count from a Zod schema
<Form.Skeleton fields={UserSchema} showSubmit />

Props

Usage While Data Loads

Render Form.Skeleton in place of the form until data arrives — @letar/forms has no built-in loading prop on <Form> itself, so the swap is done by the consuming component:

{
  isLoading ? (
    <Form.Skeleton fields={Schema} showSubmit />
  ) : (
    <Form schema={Schema} initialValue={data} onSubmit={save}>
      <Form.Field.String name="name" />
      <Form.Field.String name="email" />
      <Form.Button.Submit>Save</Form.Button.Submit>
    </Form>
  )
}

How It Works

When fields is a number, that many skeleton rows are rendered directly. When fields is a Zod object schema, the component reads the number of keys in its shape and renders that many rows — it does not (yet) vary row height per field type.

Live Example

Try the interactive example on forms-example.letar.best.