Form Skeleton
Auto-generate loading skeletons from your Zod schema
Overview
Form.Skeleton generates a loading placeholder that mirrors your form's structure. It reads the schema to produce correctly-sized skeleton bars for each field type.
import { Form } from '@letar/forms'
// While data is loading
<Form.Skeleton schema={UserSchema} showSubmit />
// Or inline: form itself shows skeleton while loading
<Form schema={UserSchema} loading={isLoading} initialValue={data} onSubmit={save}>
<Form.Field.String name="name" />
<Form.Field.String name="email" />
<Form.Button.Submit>Save</Form.Button.Submit>
</Form>Props
| Prop | Type | Default | Description |
|---|---|---|---|
schema | ZodObject | required | Schema to generate skeleton from |
showSubmit | boolean | false | Show skeleton button at the bottom |
fields | number | auto | Override number of skeleton fields |
Standalone vs Inline
Standalone — render skeleton as a separate component:
{
isLoading ? (
<Form.Skeleton schema={Schema} showSubmit />
) : (
<Form schema={Schema} initialValue={data} onSubmit={save}>
...
</Form>
)
}Inline — use loading prop on the form itself:
<Form schema={Schema} loading={!data} initialValue={data ?? {}} onSubmit={save}>
<Form.Field.String name="name" />
<Form.Button.Submit />
</Form>When loading is true, the form renders skeletons instead of fields.
How It Works
The schema is analyzed to count fields and determine their types. Each field type maps to a skeleton bar of appropriate height (text inputs → single line, textareas → multi-line, etc.).
Live Example
Try the interactive example on forms-example.letar.best.