Fields

Form Fields

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
Select a related record	BelongsToSelect
Select a polymorphic target	MorphToSelect
Manage repeated groups or child rows	Repeater

Layout Components

Component	Purpose
Grid	Responsive multi-column layout
Section	Group fields under a heading
Fieldset	Group related fields with a border

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

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())
TextInput::make('status')->default('draft')
TextInput::make('user_id')->default(fn () => auth()->id())

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')`

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'),
])
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(2)->schema([
                TextInput::make('name')->required(),
                TextInput::make('email')->email()->required(),
            ]),
        ]),
])
use NyonCode\WireForms\Components\Layout\Grid;
use NyonCode\WireForms\Components\Layout\Section;

->schema([
    Section::make('User')
        ->schema([
            Grid::make(2)->schema([
                TextInput::make('name')->required(),
                TextInput::make('email')->email()->required(),
            ]),
        ]),
])