⌘K

Forms

Form Fields

Reference for the built-in Wire Forms field and layout components.

On this page

Reference for the built-in Wire Forms field and layout components.

Choose by Use Case

Use case Component
Single-line text TextInput
Multi-line text Textarea
Select one option Select
Toggle a boolean value Toggle or Checkbox
Select multiple options CheckboxList
Pick one visible option Radio
Free-form tags / chips Tags
Numeric range slider Slider
Key-value pair editor KeyValue
Star rating Rating
Choose date or date/time DateTimePicker
Pick a color ColorPicker
Upload files FileUpload
Rich text editing RichEditor or TiptapEditor
Markdown editing MarkdownEditor
Code / script input CodeEditor
OTP / PIN code OtpInput
Hidden form metadata Hidden
Run an action from the schema Button
Select a related record BelongsToSelect
Select a polymorphic target MorphToSelect
Manage repeated groups or child rows Repeater

Layout Components

Layout components (Grid, Flex, Section, Fieldset, Tabs, Wizard) live in the shared Schema section — the same vocabulary is reused by forms, infolists, and modals.

Display Components

Component Purpose
Placeholder Read-only value display
Alert Contextual message inside the form
Html Render trusted HTML content
ViewField Render a custom Blade partial as a field

Build Your Own

Need a field that is not listed here? See Extending Forms for building custom fields and display components, reusable presets, and packaging fields into a plugin.

Common Field API

Every field inherits the following methods from the shared Field base class. Individual field docs focus on field-specific options; refer back here for anything not listed there.

Label and help text

Method Example
label(string|Closure) ->label('Full name')
helperText(string|Closure) ->helperText('Used for login')
hint(string|Closure) ->hint('Optional')
hintIcon(string) ->hintIcon('information-circle')
hintColor(string) ->hintColor('warning')
tooltip(string|Closure) ->tooltip('Shown on hover')

Visibility and state

Method Example
visible(bool|Closure) ->visible(fn () => $this->showField)
hidden(bool|Closure) ->hidden()
disabled(bool|Closure) ->disabled()
readOnly(bool|Closure) ->readOnly()

Default value

TextInput::make('status')->default('draft')
TextInput::make('user_id')->default(fn () => auth()->id())

When a form is filled, every field in the schema is seeded automatically: its ->default() when set, otherwise a type-correct blank (''/null for text, [] for array fields like CheckboxList/Tags/multi-select, false for toggles). You never have to pre-list a field just so its key exists — array fields in particular start as [] instead of collapsing.

Defaults fill only keys the incoming data does not provide, so they apply in create mode and to new/virtual fields, and never overwrite a record's stored value — even an intentional null. For record- or context-driven prefill on top of defaults, use fillFormUsing() on the action (see Actions).

Filling defaults over null

Opt a single field into treating an edit-mode null (or empty string) as unset, so its default fills there too:

TextInput::make('quantity')->numeric()->default(1)->defaultOnNull()
Select::make('status')->options(Status::class)->default(Status::Draft)->defaultOnNull()

Use this only where null is not a value the user can deliberately choose — for example a column that must always carry a value. If the user can clear the field on purpose, leave defaultOnNull() off so their choice survives; to show a hint for the empty state use placeholder() instead. When the column should simply never be null, prefer a model/DB default so create and edit stay consistent at the data layer.

Validation

Method Example
required() ->required()
rules(array|string) ->rules(['min:2', 'max:255'])
validationMessages(array) ->validationMessages(['required' => 'Povinné pole'])

Live updates

Method Behaviour
live() Triggers Livewire update on every input event (with 250 ms debounce)
lazy() Triggers Livewire update on blur
debounce(int $ms) Overrides debounce delay for live()

Prefix and suffix

Available on TextInput, Textarea, and Select.

Method Example
prefix(string) ->prefix('CZK')
suffix(string) ->suffix('%')
prefixIcon(string) ->prefixIcon('magnifying-glass')
suffixIcon(string) ->suffixIcon('check')
prefixAction(Action) ->prefixAction(Action::make('lookup')->action(fn ($get, $set) => …))
suffixAction(Action) ->suffixAction(Action::make('verify')->action(fn ($get, $set) => …))
hintAction(Action) ->hintAction(Action::make('help'))

Affix and hint actions run on the server with the field's reactive $get / $set context — see Field actions and buttons.

Other

Method Example
placeholder(string|Closure) ->placeholder('Enter value...')
autofocus() ->autofocus()
extraAttributes(array) ->extraAttributes(['data-testid' => 'name'])
columnSpan(int|string) ->columnSpan(2) — span columns inside a Grid

Common Patterns

Basic create or edit form

use NyonCode\WireForms\Components\TextInput;
use NyonCode\WireForms\Components\Select;
use NyonCode\WireForms\Components\Toggle;
 
->schema([
    TextInput::make('name')
        ->required()
        ->maxLength(255),
 
    TextInput::make('email')
        ->email()
        ->required(),
 
    Select::make('role')
        ->options([
            'admin' => 'Admin',
            'editor' => 'Editor',
            'viewer' => 'Viewer',
        ])
        ->required(),
 
    Toggle::make('active'),
])

Group fields into sections

use NyonCode\WireForms\Components\Layout\Grid;
use NyonCode\WireForms\Components\Layout\Section;
 
->schema([
    Section::make('User')
        ->schema([
            Grid::make()->columns(2)->schema([
                TextInput::make('name')->required(),
                TextInput::make('email')->email()->required(),
            ]),
        ]),
])