Form
Building forms with validation and accessible field markup.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/form.tsx — field + label + description + error message scaffolding.
export const Field = (o) => \`<div class="space-y-2">\${o.label}\${o.control}
\${o.description ? \`<p class="text-sm text-muted-foreground">\${o.description}</p>\` : ""}
\${o.error ? \`<p class="text-sm font-medium text-destructive">\${o.error}</p>\` : ""}</div>\`;
// Validate in your PRISM action and re-render the page with `error` set on the offending field.Installation
$ bext ui add formCopy and paste the following into src/components/ui/form.tsx.
/** @jsxImportSource @bext-stack/framework */
// src/components/ui/form.tsx — field + label + description + error message scaffolding.
export const Field = (o) => \`<div class="space-y-2">\${o.label}\${o.control}
\${o.description ? \`<p class="text-sm text-muted-foreground">\${o.description}</p>\` : ""}
\${o.error ? \`<p class="text-sm font-medium text-destructive">\${o.error}</p>\` : ""}</div>\`;
// Validate in your PRISM action and re-render the page with `error` set on the offending field.On This Page