Forms Documentation

Appearance

Customizing Presenters ​

Field options, slots, styling, and direct component usage cover most changes. You may copy a presenter when the field markup itself needs to change. Use Manual Usage for shipped components rendered as-is.

Copy from the shipped presenter:

  1. Copy the presenter for your stack from the package source.
  2. Keep imports pointed at public package entrypoints.
  3. Change the markup, classes, and composition in your app.

The Vue composables and React hooks are public because copied presenters need them for package-owned behavior, validation wiring, IDs, ARIA state, uploads, popovers, and keyboard handling. They are exposed for presenter copies, not as a general UI framework. Replacing hook or composable behavior makes that behavior yours to maintain.

Use the installation guide for runtime setup and styles. The source and generated TypeScript declarations for your installed version are the detailed reference.

Import Paths ​

The main public entrypoints are:

  • @inertiaui/form-vue and @inertiaui/form-react for the form shell, registry, core helpers, and shared types.
  • @inertiaui/form-vue/components and @inertiaui/form-react/components for cloneable presenter components.
  • @inertiaui/form-vue/composables and @inertiaui/form-react/hooks for the behavior imports used by copied presenters.
  • @inertiaui/form-vue/richtext and @inertiaui/form-react/richtext for RichText and editor helpers.
  • @inertiaui/form-vue/styling and @inertiaui/form-react/styling for shared class helpers used by shipped presenters.
  • @inertiaui/form-vue/fields/{Name} and @inertiaui/form-react/fields/{Name} for one default field component.
  • @inertiaui/form-vue/vite and @inertiaui/form-react/vite for the Vite plugin.

Use import type for declarations. The ./style.css and ./theme.css exports are stylesheets, not JavaScript runtime values.

Copy From Source ​

Built-in presenters live in vue/src/components/inputs, vue/src/components/display, react/src/components/inputs, and react/src/components/display. Shared helper components live under each stack's components/ui and components/editor folders.

The presenter you copy already shows which behavior hook or composable, shared helper component, styling helper, and type imports it needs. Keep those imports public and make your markup changes around them.

ts
import { FieldWrapper } from '@inertiaui/form-vue/components'
import { useTextInput, type UseTextInputProps } from '@inertiaui/form-vue/composables'
ts
import { FieldWrapper } from '@inertiaui/form-react/components'
import { useTextInput } from '@inertiaui/form-react/hooks'
import type { TextInputField } from '@inertiaui/form-react'

Keep lower-level helpers imported by the copied presenter unless you are deliberately replacing the behavior they provide.

Manual form rendering, direct component usage, slots, field registration, RichText configuration, and icon resolvers are documented on their own pages. This page does not duplicate those contracts.