Styling

Tailwind CSS 4.3+

Inertia Forms requires Tailwind CSS 4.3 or later. It does not require the @tailwindcss/forms plugin. All input components include their own base styles using ring-* utilities instead of border-*.

CSS Setup

Import the package theme tokens and component styles from your application CSS, then add the @source directive so Tailwind picks up the classes used inside the Composer vendor source files:

VueReact

css

@import "tailwindcss";
@import "@inertiaui/form-vue/theme.css";
@import "@inertiaui/form-vue/style.css";

@source "../../vendor/inertiaui/forms/vue/src/**/*.{js,ts,vue}";

css

@import "tailwindcss";
@import "@inertiaui/form-react/theme.css";
@import "@inertiaui/form-react/style.css";

@source "../../vendor/inertiaui/forms/react/src/**/*.{js,jsx,ts,tsx}";

Without this directive, Tailwind does not scan the package source for class names and some styles may be missing.

Keep both package CSS imports. theme.css defines the shared token values; style.css contains component and browser-generated DOM styles that are intentionally shipped as CSS.

Dark Mode

Every component uses semantic CSS tokens, and the default theme swaps those tokens under .dark. Add the dark class to <html> or another page-level ancestor and the generated controls will adapt automatically.

Applications that use Tailwind's class-based dark mode for their own utilities should configure the variant in CSS:

css

@custom-variant dark (&:where(.dark, .dark *));

Theme Tokens

Inertia Forms ships with namespaced semantic tokens. The default values use a blue accent and zinc-tinted dark mode to stay consistent with InertiaUI Table, but your app should customize the iui-form-* tokens instead of targeting internal Tailwind palette utilities.

Tailwind theme variable namespaces turn these tokens into semantic utility classes. For example, --color-iui-form-accent generates utilities like bg-iui-form-accent, text-iui-form-accent, and ring-iui-form-accent. Radius and shadow tokens work the same way, so --radius-iui-form becomes rounded-iui-form, and --shadow-iui-form-lg becomes shadow-iui-form-lg.

These utilities do not use the .iui-form-* hook prefix because bg-, text-, ring-, rounded-, and shadow- are Tailwind utility families. Use token utilities in PHP class() and partClass() values when you want field-level styling to follow the package theme. Use .iui-form-* hooks when writing CSS selectors against rendered component structure.

css

:root {
    --color-iui-form-ring: var(--color-emerald-500);
    --color-iui-form-accent: var(--color-emerald-600);
    --color-iui-form-accent-hover: var(--color-emerald-700);
    --color-iui-form-accent-subtle: var(--color-emerald-50);
    --color-iui-form-accent-subtle-foreground: var(--color-emerald-700);
    --radius-iui-form: 0.5rem;
}

.dark {
    --color-iui-form-ring: var(--color-emerald-400);
    --color-iui-form-accent: var(--color-emerald-500);
    --color-iui-form-accent-hover: var(--color-emerald-600);
    --color-iui-form-accent-subtle: color-mix(in oklab, var(--color-emerald-400) 10%, transparent);
    --color-iui-form-accent-subtle-foreground: var(--color-emerald-300);
}

Important token groups include:

Group	Tokens
Text and surfaces	`--color-iui-form-foreground`, `--color-iui-form-input-foreground`, `--color-iui-form-surface`, `--color-iui-form-input`, `--color-iui-form-muted`, `--color-iui-form-muted-strong`
Borders and focus	`--color-iui-form-border`, `--color-iui-form-border-subtle`, `--color-iui-form-border-hover`, `--color-iui-form-ring`
Accent states	`--color-iui-form-accent`, `--color-iui-form-accent-hover`, `--color-iui-form-accent-foreground`, `--color-iui-form-accent-subtle`, `--color-iui-form-accent-subtle-foreground`
Validation and status	`--color-iui-form-destructive`, `--color-iui-form-info-`, `--color-iui-form-success-`, `--color-iui-form-warning-`, `--color-iui-form-danger-`
Shape and shadow	`--radius-iui-form`, `--radius-iui-form-sm`, `--radius-iui-form-lg`, `--shadow-iui-form-*`

Available CSS Hooks

Every rendered Form component includes stable iui-form-* classes on the public pieces you are likely to style from your application CSS. These hooks are part of the frontend packages' public styling contract.

css

.iui-form-field {
    margin-block-end: 1rem;
}

.iui-form-label {
    letter-spacing: 0.01em;
}

.iui-form-combobox-dropdown,
.iui-form-datepicker-panel {
    --tw-shadow: var(--shadow-lg);
}

.iui-form-repeater-item,
.iui-form-key-value-row,
.iui-form-file-upload-item {
    scroll-margin-block: 1rem;
}

Use these hooks for app-wide styling and theme integration. The underlying DOM structure and internal Tailwind utility classes may evolve between releases, so avoid depending on generated markup depth or utility class names as selectors.

The fastest way to confirm hooks for the exact field variant you are styling is to inspect the rendered control in your browser. Every hook is prefixed with iui-form- to avoid conflicts with classes in your app. Shared hooks and field-specific hooks are additive: a combobox option may expose both iui-form-option and iui-form-combobox-option, while a selected option also gets iui-form-option-selected.

Combobox token and record modes also expose mode-specific hooks, such as iui-form-combobox-tags-* and iui-form-combobox-records-*.

Start with the shared hooks when you want a broad rule, then narrow to a field-specific hook only when the rule should affect one component.

Goal	Start with
Field layout and labels	`iui-form-field`, `iui-form-label`, `iui-form-help`, `iui-form-error`, `iui-form-required-marker`
Control chrome	`iui-form-control`, `iui-form-input`, `iui-form-trigger`, `iui-form-actions`, `iui-form-action`
Options and selected values	`iui-form-option`, `iui-form-option-selected`, `iui-form-option-disabled`, `iui-form-selected-item`, `iui-form-tag`
Popovers and empty states	`iui-form-popover`, `iui-form-dialog`, `iui-form-empty`, `iui-form-footer`, `iui-form-loading`
Collections and drag states	`iui-form-collection-list`, `iui-form-collection-item`, `iui-form-collection-item-dragging`, `iui-form-drag-handle`

The complete inventory below is meant for lookup, not reading end to end. Expand the area that matches the component you are styling. Hooks written with braces are generated from field configuration, such as iui-form-button-{primary|secondary|danger|outline|ghost|link} and iui-form-heading-{1|2|3|4}.

Shared layout and interaction hooks

text

iui-form
iui-form-action
iui-form-actions
iui-form-add-button
iui-form-addon
iui-form-addon-{text|icon|button|select}
iui-form-addon-button
iui-form-addon-group
iui-form-addon-leading
iui-form-addon-select
iui-form-addon-select-wrapper
iui-form-addon-trailing
iui-form-badge
iui-form-button
iui-form-button-{primary|secondary|danger|outline|ghost|link}
iui-form-button-{xs|sm|md|lg|xl}
iui-form-button-icon
iui-form-button-spinner
iui-form-clear-action
iui-form-collection
iui-form-collection-header
iui-form-collection-item
iui-form-collection-item-drag-over
iui-form-collection-item-dragging
iui-form-collection-item-header
iui-form-collection-item-panel
iui-form-collection-list
iui-form-control
iui-form-copy-action
iui-form-create-option
iui-form-dialog
iui-form-drag-handle
iui-form-dynamic-icon
iui-form-empty
iui-form-error
iui-form-feedback
iui-form-field
iui-form-field-content
iui-form-field-control
iui-form-fieldset
iui-form-fieldset-description
iui-form-fieldset-grid
iui-form-fieldset-legend
iui-form-footer
iui-form-help
iui-form-hidden-input
iui-form-input
iui-form-input-icon
iui-form-input-wrapper
iui-form-keyboard-shortcut
iui-form-keyboard-shortcut-wrapper
iui-form-label
iui-form-label-row
iui-form-label-trailing
iui-form-leading-icon
iui-form-leading-icon-wrapper
iui-form-loading
iui-form-move-down-action
iui-form-move-up-action
iui-form-option
iui-form-option-content
iui-form-option-description
iui-form-option-disabled
iui-form-option-group
iui-form-option-highlighted
iui-form-option-icon
iui-form-option-image
iui-form-option-label
iui-form-option-label-row
iui-form-option-leading
iui-form-option-leading-placeholder
iui-form-option-selected
iui-form-option-selected-suffix
iui-form-option-text
iui-form-password-action
iui-form-popover
iui-form-preset
iui-form-progress
iui-form-remove-action
iui-form-required-marker
iui-form-selected-item
iui-form-selected-item-drag-over
iui-form-selected-item-dragging
iui-form-selected-item-unavailable
iui-form-spinner
iui-form-submit
iui-form-submit-wrapper
iui-form-swatch
iui-form-tooltip
iui-form-tooltip-content
iui-form-tooltip-trigger
iui-form-trailing-icon
iui-form-trigger
iui-form-unknown-field

Display fields

text

iui-form-callout
iui-form-callout-{info|success|warning|danger}
iui-form-callout-body
iui-form-callout-content
iui-form-callout-icon
iui-form-callout-title
iui-form-heading
iui-form-heading-{1|2|3|4}
iui-form-html
iui-form-separator
iui-form-text

Choice, listbox, and picker fields

text

iui-form-checkbox
iui-form-checkbox-input

iui-form-checkbox-group
iui-form-checkbox-group-deselect-all-action
iui-form-checkbox-group-indicator
iui-form-checkbox-group-option
iui-form-checkbox-group-option-button
iui-form-checkbox-group-option-card
iui-form-checkbox-group-option-content
iui-form-checkbox-group-option-default
iui-form-checkbox-group-option-description
iui-form-checkbox-group-option-icon
iui-form-checkbox-group-option-label
iui-form-checkbox-group-option-label-row
iui-form-checkbox-group-option-pill
iui-form-checkbox-group-select-actions
iui-form-checkbox-group-select-actions-row
iui-form-checkbox-group-select-all-action
iui-form-checkbox-group-wrapper

iui-form-combobox
iui-form-combobox-actions
iui-form-combobox-clear-action
iui-form-combobox-create-option
iui-form-combobox-dropdown
iui-form-combobox-empty
iui-form-combobox-group
iui-form-combobox-group-label
iui-form-combobox-input
iui-form-combobox-input-container
iui-form-combobox-loading
iui-form-combobox-loading-more
iui-form-combobox-option
iui-form-combobox-option-group
iui-form-combobox-search
iui-form-combobox-selected-option
iui-form-combobox-selected-options
iui-form-combobox-tag
iui-form-combobox-tag-remove
iui-form-combobox-trigger
iui-form-combobox-wrapper

iui-form-radio
iui-form-radio-group
iui-form-radio-indicator
iui-form-radio-indicator-wrapper
iui-form-radio-input
iui-form-radio-option
iui-form-radio-option-button
iui-form-radio-option-card
iui-form-radio-option-content
iui-form-radio-option-default
iui-form-radio-option-description
iui-form-radio-option-icon
iui-form-radio-option-label
iui-form-radio-option-label-row
iui-form-radio-option-pill
iui-form-radio-option-segmented

iui-form-combobox-records
iui-form-combobox-records-action
iui-form-combobox-records-actions
iui-form-combobox-records-chip
iui-form-combobox-records-clear-action
iui-form-combobox-records-create-option
iui-form-combobox-records-drag-handle
iui-form-combobox-records-dropdown
iui-form-combobox-records-item-badge
iui-form-combobox-records-load-more
iui-form-combobox-records-loading
iui-form-combobox-records-option
iui-form-combobox-records-option-group
iui-form-combobox-records-results
iui-form-combobox-records-search
iui-form-combobox-records-selected-item
iui-form-combobox-records-selected-list
iui-form-combobox-records-status
iui-form-combobox-records-trigger

iui-form-tag
iui-form-tag-drag-handle
iui-form-tag-drag-over
iui-form-tag-dragging
iui-form-tag-label
iui-form-tag-remove
iui-form-combobox-tags
iui-form-combobox-tags-clear-action
iui-form-combobox-tags-dropdown
iui-form-combobox-tags-empty
iui-form-combobox-tags-feedback
iui-form-combobox-tags-field
iui-form-combobox-tags-footer
iui-form-combobox-tags-option
iui-form-combobox-tags-options
iui-form-combobox-tags-tag
iui-form-combobox-tags-wrapper

iui-form-toggle
iui-form-toggle-group
iui-form-toggle-off-label
iui-form-toggle-on-label
iui-form-toggle-thumb
iui-form-toggle-track

Date, time, color, and numeric controls

text

iui-form-color-picker
iui-form-color-picker-action
iui-form-color-picker-clear-action
iui-form-color-picker-dropdown
iui-form-color-picker-input
iui-form-color-picker-input-row
iui-form-color-picker-input-section
iui-form-color-picker-preview
iui-form-color-picker-slider
iui-form-color-picker-sliders
iui-form-color-picker-swatch
iui-form-color-picker-swatches
iui-form-color-picker-trigger
iui-form-color-picker-trigger-button
iui-form-color-picker-trigger-swatch
iui-form-color-picker-value

iui-form-datepicker
iui-form-datepicker-actions
iui-form-datepicker-calendar
iui-form-datepicker-clear-action
iui-form-datepicker-day
iui-form-datepicker-footer
iui-form-datepicker-month-button
iui-form-datepicker-nav-action
iui-form-datepicker-panel
iui-form-datepicker-preset
iui-form-datepicker-presets
iui-form-datepicker-time-select
iui-form-datepicker-today-action
iui-form-datepicker-trigger
iui-form-datepicker-value
iui-form-datepicker-year-button

DatePicker also emits these date-grid class hooks. They do not represent a public Calendar field or component.

text

iui-form-calendar
iui-form-calendar-day
iui-form-calendar-day-disabled
iui-form-calendar-day-selected
iui-form-calendar-day-today
iui-form-calendar-footer
iui-form-calendar-month-button
iui-form-calendar-nav-action
iui-form-calendar-panel
iui-form-calendar-today-action
iui-form-calendar-year-button

text

iui-form-slider
iui-form-slider-filled-track
iui-form-slider-horizontal
iui-form-slider-input
iui-form-slider-mark
iui-form-slider-min-max
iui-form-slider-thumb
iui-form-slider-track
iui-form-slider-track-container
iui-form-slider-value
iui-form-slider-value-column
iui-form-slider-value-row
iui-form-slider-vertical
iui-form-slider-vertical-input
iui-form-slider-vertical-layout

iui-form-timepicker
iui-form-timepicker-actions
iui-form-timepicker-clear-action
iui-form-timepicker-column
iui-form-timepicker-column-header
iui-form-timepicker-columns
iui-form-timepicker-dropdown
iui-form-timepicker-footer
iui-form-timepicker-footer-clear-action
iui-form-timepicker-now-action
iui-form-timepicker-option
iui-form-timepicker-trigger
iui-form-timepicker-value

Text and scalar fields

text

iui-form-link
iui-form-link-grid
iui-form-link-input
iui-form-link-structured
iui-form-link-target-select
iui-form-link-url-input

iui-form-otp-digit
iui-form-otp-input
iui-form-otp-separator

iui-form-slug
iui-form-text-input
iui-form-textarea
iui-form-textarea-counter
iui-form-textarea-wrapper

Structured, upload, and editor fields

text

iui-form-blocks
iui-form-blocks-add-button
iui-form-blocks-add-wrapper
iui-form-blocks-chooser
iui-form-blocks-chooser-option
iui-form-blocks-collapse-toggle-action
iui-form-blocks-dialog
iui-form-blocks-drag-handle
iui-form-blocks-empty
iui-form-blocks-item
iui-form-blocks-item-action
iui-form-blocks-item-actions
iui-form-blocks-item-description
iui-form-blocks-item-header
iui-form-blocks-item-panel
iui-form-blocks-item-preview
iui-form-blocks-item-preview-header
iui-form-blocks-item-title
iui-form-blocks-item-type-badge
iui-form-blocks-list

iui-form-composer
iui-form-composer-action
iui-form-composer-attachment
iui-form-composer-attachment-action
iui-form-composer-attachment-actions
iui-form-composer-attachment-drag-handle
iui-form-composer-attachment-error
iui-form-composer-attachment-info
iui-form-composer-attachment-name
iui-form-composer-attachment-preview
iui-form-composer-attachment-progress
iui-form-composer-attachment-size
iui-form-composer-attachments
iui-form-composer-control
iui-form-composer-counter
iui-form-composer-footer
iui-form-composer-footer-actions
iui-form-composer-input
iui-form-composer-keyboard-hint
iui-form-composer-quick-action
iui-form-composer-quick-actions
iui-form-composer-submit

iui-form-editor-footer
iui-form-editor-shell
iui-form-editor-toolbar
iui-form-editor-toolbar-button
iui-form-editor-toolbar-button-active
iui-form-editor-toolbar-separator
iui-form-editor-toolbar-spacer

iui-form-file-upload
iui-form-file-upload-actions
iui-form-file-upload-drag-handle
iui-form-file-upload-dropzone
iui-form-file-upload-error
iui-form-file-upload-feedback
iui-form-file-upload-info
iui-form-file-upload-item
iui-form-file-upload-item-drag-over
iui-form-file-upload-item-dragging
iui-form-file-upload-list
iui-form-file-upload-name
iui-form-file-upload-preview
iui-form-file-upload-preview-wrapper
iui-form-file-upload-progress
iui-form-file-upload-size
iui-form-file-upload-status

iui-form-key-value
iui-form-key-value-action
iui-form-key-value-add-button
iui-form-key-value-body
iui-form-key-value-drag-handle
iui-form-key-value-empty
iui-form-key-value-header
iui-form-key-value-input
iui-form-key-value-row
iui-form-key-value-scroll
iui-form-key-value-table
iui-form-key-value-table-element

iui-form-repeater
iui-form-repeater-add-button
iui-form-repeater-collapse-toggle-action
iui-form-repeater-dialog
iui-form-repeater-drag-handle
iui-form-repeater-empty
iui-form-repeater-item
iui-form-repeater-item-action
iui-form-repeater-item-actions
iui-form-repeater-item-header
iui-form-repeater-item-label
iui-form-repeater-item-panel
iui-form-repeater-list

iui-form-rich-text
iui-form-rich-text-dialog
iui-form-rich-text-dialog-content
iui-form-rich-text-editor
iui-form-rich-text-editor-content
iui-form-rich-text-footer
iui-form-rich-text-image-popover
iui-form-rich-text-link-popover
iui-form-rich-text-shell
iui-form-rich-text-toolbar
iui-form-rich-text-toolbar-button
iui-form-rich-text-toolbar-separator
iui-form-rich-text-toolbar-spacer

Wizard hooks

text

iui-form-wizard
iui-form-wizard-body
iui-form-wizard-content
iui-form-wizard-navigation
iui-form-wizard-next
iui-form-wizard-prev
iui-form-wizard-progress
iui-form-wizard-progress-{horizontal|vertical}
iui-form-wizard-progress-{default|compact|timeline|bar}
iui-form-wizard-progress-bar
iui-form-wizard-progress-fill
iui-form-wizard-step
iui-form-wizard-step-button
iui-form-wizard-step-completed
iui-form-wizard-step-connector
iui-form-wizard-step-current
iui-form-wizard-step-description
iui-form-wizard-step-error
iui-form-wizard-step-indicator
iui-form-wizard-step-pending
iui-form-wizard-step-title
iui-form-wizard-step-visited
iui-form-wizard-steps

Wizard step items and buttons also expose data-state="current|completed|error|visited|pending" and data-visited="true" attributes for stateful custom styling.

Per-Field CSS Classes

You may add custom CSS classes to individual fields from PHP. class() remains the primary control-level target. Newer fields also expose explicit wrapper and control targets.

`->class()`

Adds classes to the primary input/control element itself.

php

TextInput::make('name')
    ->class('max-w-sm');

`->controlClass()`

Adds classes to the same primary control target as class(), but with a more explicit name. These classes are merged after class(), so they win when Tailwind classes conflict.

php

TextInput::make('name')
    ->class('ring-iui-form-border')
    ->controlClass('ring-iui-form-ring');

`->wrapperClass()`

Adds classes to the field wrapper/root element. Use this for grid spans, field-level spacing, and layout tweaks that should not land on the input itself.

php

TextInput::make('name')
    ->wrapperClass('col-span-full');

`->labelClass()`

Adds classes to the <label> element.

php

TextInput::make('name')
    ->labelClass('font-bold text-lg');

`->helpClass()`

Adds classes to the help text paragraph below the input.

php

TextInput::make('email')
    ->help('We will never share your email.')
    ->helpClass('italic');

Class target methods accept a string or an array of strings. The classes are merged with the component's default classes using tailwind-merge, so you may safely override defaults without conflicts.

Common wrapper presentation helpers are additive on the newer field grammar: hideLabel(), badge(), labelTrailing(), tooltip(), errorClass(), helpPosition('above'|'below'), stackedLayout(), inlineLayout(), splitLayout(), controlPosition('start'|'end'), and invalid().

The preview below combines wrapper, label, control, and help text class targets on an ordinary field:

Example

Saved search

Used for billing review filters.

php

TextInput::make('saved_search')
    ->label('Saved search')
    ->help('Used for billing review filters.')
    ->wrapperClass('md:col-span-2')
    ->labelClass('font-semibold')
    ->controlClass('ring-iui-form-ring')
    ->helpClass('text-iui-form-info-foreground');

Component Part Classes

Use class() or controlClass() when you want to style the whole visible control. Use wrapperClass() for layout around the field. Use partClass() when you need to style one named internal piece of a composite control, such as a dropdown panel, selected option, upload item, editor toolbar, or slider thumb. Use .iui-form-* hooks when you want app-wide CSS selectors instead of per-field classes.

Most named parts have a convenience helper. The helper name is the part name plus Class(), for example dropdownClass(), selectedOptionClass(), or itemHeaderClass().

php

Combobox::make('status')
    ->dropdownClass('max-h-80')
    ->optionClass('px-4')
    ->selectedOptionClass('font-semibold')
    ->tagClass('rounded-full');

Repeater::make('links')
    ->itemClass('bg-white')
    ->itemHeaderClass('px-4')
    ->addButtonClass('border-solid');

All part class methods accept a string, a Laravel-style class-value array, or null. Classes are serialized under partClasses and merged after the component defaults. Passing null to a part class helper or to partClass() removes that named override.

Use the generic target directly when a part does not have a convenience helper, or when you are passing through an app-specific part name from a custom field:

php

Composer::make('message')
    ->partClass('items', 'gap-4')
    ->partClass('editor', 'min-h-32');

Available parts by field:

Field	Parts
`TextInput`	`addonGroup`, `addon`, `action`
`Toggle`	`track`, `thumb`
`CheckboxGroup`, `Radio`	`option`, `selectedOption`
`Combobox`	`dropdown`, `optionGroup`, `option`, `selectedOption`, `selectedItem`, `tag`, `empty`, `loading`, `createOption`, `footer`
`TimePicker`	`dropdown`, `option`, `selectedOption`, `footer`
`DatePicker`	`dropdown`, `calendar`, `day`, `monthButton`, `yearButton`, `preset`, `todayButton`, `footer`
`ColorPicker`	`dropdown`, `swatch`, `selectedOption`, `slider`, `preview`, `action`
`Slider`	`track`, `filledTrack`, `thumb`, `mark`
`OtpInput`	`digit`, `separator`
`File`	`list`, `item`, `preview`, `progress`, `feedback`
`RichText`	`dialog`, `editor`, `toolbar`, `toolbarButton`, `footer`
`Composer`	`editor`, `quickAction`, `items`, `item`, `preview`, `progress`, `footer`, `action`, `submitButton`
`KeyValue`	`item`, `itemHeader`, `addButton`, `empty`
`Repeater`	`item`, `itemHeader`, `itemPanel`, `addButton`, `empty`, `dialog`
`Blocks`	`dropdown`, `option`, `item`, `itemHeader`, `itemPanel`, `addButton`, `empty`, `dialog`

Shared Presentation API

Visible fields expose these shared PHP presentation methods. Nullable methods clear their explicit override when passed null.

Method	Default	Description
`controlClass(array\|string\|null)`	`null`	Add classes to the visible control or composite control container.
`wrapperClass(array\|string\|null)`	`null`	Add classes to the outer field wrapper.
`errorClass(array\|string\|null)`	`null`	Add classes to the validation error text.
`hideLabel(bool $hide = true)` / `labelSrOnly()`	`false`	Keep the label available to assistive technology while hiding it visually.
`badge(?string)` / `labelBadge()`	`null`	Add or clear compact text beside the label.
`badgeClass(array\|string\|null)`	`null`	Style the label badge.
`labelTrailing(?string)`	`null`	Add or clear trailing label-row text.
`labelTrailingClass(array\|string\|null)`	`null`	Style the trailing label text.
`tooltip(?string)` / `labelTooltip()`	`null`	Add or clear accessible label-side tooltip text.
`helpPosition('above'\|'below'\|null)`	`null`	Place help above or below the control. `null` uses the wrapper's normal below-control placement.
`layout('stacked'\|'inline'\|'split'\|null)`	`null`	Select the wrapper layout. `null` uses stacked layout.
`stackedLayout()`, `inlineLayout()`, `splitLayout()`	n/a	Convenience methods for the three layout values.
`controlPosition('start'\|'end'\|null)`	`null`	Place the control within inline or split layouts. `null` uses `end` for split layout and `start` otherwise.
`invalid(bool $invalid = true)`	`false`	Force visual and ARIA invalid state without requiring an error message.
`partClass(string $part, array\|string\|null)`	none	Set one named part override, or remove it with `null`.
`partClasses(array $classes)`	`[]`	Merge several named part overrides; `null` values remove existing entries.

Where Presentation Classes Land

The presentation helpers and invalid() work on every field that renders a visible control. What differs is which element the classes target:

Field family	Classes target
`TextInput`, `Textarea`, `Checkbox`, `Toggle`, `Submit`	The input control directly.
`Combobox`, `CheckboxGroup`, `Radio`	The control wiring; option behavior and keyboard handling are handled separately.
`Slider`, `DatePicker`, `TimePicker`	The visible picker or slider control.
`Combobox::tokens()`, `OtpInput`, `ColorPicker`	The composite visible control.
`File`, `RichText`, `Composer`	The upload/editor/composer control container.
`KeyValue`, `Repeater`, `Blocks`	The structural control container; nested schema fields keep their own presentation settings.

Two fields are exceptions:

Hidden renders no visible wrapper, label, help text, or control, so presentation helpers and invalid() do not apply.
Fieldset uses its own grouping API instead: legend(), description(), class(), id(), and columns().

tooltip() renders a compact label-side help button. The button references the stable ${inputId}-tooltip element with aria-describedby, and the tooltip panel becomes visible on pointer hover or keyboard focus. The input's own aria-describedby still points to help text or errors, so label tooltip copy does not replace validation/help descriptions. These helpers do not change Combobox option behavior or add keyboard reorder controls for reorderable fields.

Ring Pattern

Tailwind CSS 4 no longer applies base border styles to form elements by default. Inertia Forms uses token-backed ring-* utilities for all input borders:

ring-1 ring-inset ring-iui-form-border     (default border)
focus:ring-2 focus:ring-iui-form-ring      (focus state)
ring-iui-form-destructive                  (invalid state)

This pattern works reliably without the @tailwindcss/forms plugin. Custom field components should follow the same convention to keep their UI consistent.

Form Container

The <Form> component accepts a class prop that is applied to the <form> element. The default class is space-y-6.

VueReact

vue

<Form :form="form" class="max-w-2xl mx-auto" />

tsx

<Form form={form} className="mx-auto max-w-2xl" />

Fieldset Grid

A fieldset that specifies ->columns(2) or more renders fields in a responsive CSS grid. The value is the maximum column target, and the grid drops to fewer columns when the container is too narrow. Wide field types like Textarea, RichText, File, KeyValue, Repeater, Blocks, and nested Fieldset automatically span the full width of the grid.

Styling ​

Tailwind CSS 4.3+ ​

CSS Setup ​

Dark Mode ​

Theme Tokens ​

Available CSS Hooks ​

Per-Field CSS Classes ​

->class() ​

->controlClass() ​

->wrapperClass() ​

->labelClass() ​

->helpClass() ​

Component Part Classes ​

Shared Presentation API ​

Where Presentation Classes Land ​

Ring Pattern ​

Form Container ​

Fieldset Grid ​

Styling

Tailwind CSS 4.3+

CSS Setup

Dark Mode

Theme Tokens

Available CSS Hooks

Per-Field CSS Classes

`->class()`

`->controlClass()`

`->wrapperClass()`

`->labelClass()`

`->helpClass()`

Component Part Classes

Shared Presentation API

Where Presentation Classes Land

Ring Pattern

Form Container

Fieldset Grid