SkeletonForm
v1.0.2Updated 20 Jul 2026A placeholder for an edit form: `fields` label-and-input pairs followed by a right-aligned pair of action buttons. Set fields to the number the real form renders so the dialog or panel keeps its height when data arrives. Announces itself with role="status" and aria-busy.
Preview
Live · 7 stories▸Why this is recommendedloadingplaceholderformfields+2
SkeletonForm showing skeleton placeholders while data loads — form.
- ✓Edit form while the record loads
- ✓Settings panel on first paint
- ✓Profile form waiting on user data
- ✓Modal form before its defaults arrive
- ✓Any form whose initial values are still fetching
- Configurable field count
- Label bar + input bar per field
- Right-aligned cancel/submit button placeholders
- role="status" + aria-busy with an sr-only "Loading…" label
- Forwards animation and intensity to every bar
- i18n: labels prop overrides the sr-only "Loading…" announcement
- ✕Forms already rendered and merely submitting (disable and use Progress)
- ✕Tabular data (use SkeletonTable)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
fieldsHow many label + input pairs to render. Defaults to 4.
—animationShimmer style applied to every bar. Defaults to 'pulse'.
—intensityPlaceholder contrast against the surface.
—labelsOverride the built-in sr-only "Loading…" announcement (i18n). Merged over DEFAULT_SKELETON_FORM_LABELS.
—