UI Themes

FormRenderer UI component

import { FormRenderer } from '@macrulez/vue-form-schema/ui'

Props

Prop	Type	Default	Description
form	UseFormReturn	—	Return value of useForm
components	Partial<Record<FieldType, Component>>	built-ins	Override per-type renderers
submitLabel	string	'Submit'	Submit button text

Slots

Slot	Scope	Description
#field-{name}	{ field, value, error, touched, setValue, touch }	Replace an entire field
#label-{name}	{ field }	Replace a label
#error-{name}	{ field, error }	Replace error display
#submit	{ isSubmitting, isValid }	Replace the submit button

Built-in field components

All exported individually from vue-form-schema/ui:

Component	Field types
TextField	text, email
NumberField	number
TextareaField	textarea
SelectField	select
CheckboxField	checkbox
RadioField	radio
DateField	date
ArrayField	array
FileField	file

Tailwind UI theme

A drop-in replacement for FormRenderer using Tailwind utility classes — no custom CSS needed in your app. Requires Tailwind CSS installed and configured to scan library source files.

import { TailwindFormRenderer } from '@macrulez/vue-form-schema/ui/tailwind'

<!-- Same form, same schema — just swap the renderer -->
<TailwindFormRenderer :form="form" submit-label="Save" />

All field components are also exported individually:

import {
  TwTextField,
  TwSelectField,
  TwCheckboxField,
  TwRadioField,
  TwFileField,
  TwArrayField,
  // …
} from '@macrulez/vue-form-schema/ui/tailwind'

shadcn / PrimeVue / Naive UI themes

Three more drop-in FormRenderer replacements for popular component libraries — same schema, same useForm, just swap the renderer.

import { ShadcnFormRenderer } from '@macrulez/vue-form-schema/ui/shadcn'
import { PrimeVueFormRenderer } from '@macrulez/vue-form-schema/ui/primevue'
import { NaiveFormRenderer } from '@macrulez/vue-form-schema/ui/naive'

<ShadcnFormRenderer :form="form" submit-label="Save" />
<PrimeVueFormRenderer :form="form" submit-label="Save" />
<NaiveFormRenderer :form="form" submit-label="Save" />

Theme	What it actually is
ui/shadcn	Not a wrapper around importable shadcn-vue components — shadcn-vue ships as copy-paste source via its CLI, not as an npm component library, so there's nothing to import. This theme is Tailwind markup styled with shadcn/ui's own utility-class vocabulary (border-input, bg-primary, text-destructive, ring-ring, …). Drop it into a project that already has shadcn-vue's Tailwind theme tokens configured (npx shadcn-vue init) and it matches natively — same requirement as ui/tailwind for Tailwind CSS itself.
ui/primevue	Real wrapper components around PrimeVue's own (InputText, Select, RadioButton, Checkbox, DatePicker, Message, Button, …). Requires primevue ^4 or ^5 installed and its Vue plugin registered (app.use(PrimeVue, { theme: { preset: Aura } }) or your own preset).
ui/naive	Real wrapper components around Naive UI's own (NInput, NSelect, NRadioGroup, NCheckbox, NDatePicker, NFormItem, NButton, …). Requires naive-ui ^2.38 installed; no global plugin needed.

File fields in the PrimeVue and Naive UI themes use a small self-contained native dropzone rather than <FileUpload> / <NUpload> — those components are built around actively uploading to a server, not just collecting File objects for later form submission.

All field components are also exported individually per theme, prefixed Sh* / Pv* / Nu* respectively (e.g. ShTextField, PvSelectField, NuCheckboxField).

Accessibility

All built-in field components include full a11y attributes:

Feature	How
aria-required	Set to "true" on required inputs, selects, textareas, fieldsets
aria-invalid	Set to "true" when the field is touched and has errors
aria-describedby	Points to "{name}-error" when errors are present
role="alert" + aria-live="polite"	Error lists are announced by screen readers on appearance
label[for] + input[id]	All inputs have matching label and id
fieldset + legend	Radio groups use semantic grouping
aria-checked	Checkboxes reflect boolean state explicitly

SSR compatibility

The core (useForm, validators, parsers, ConditionEvaluator) does not use browser APIs. bindMask and FormRenderer use DOM APIs — wrap them in onMounted or <ClientOnly> when needed.