Forms

TextInput

Text input field with variants for email, password, numeric, tel, and URL.

On this page

Basic Usage
Type Variants
Constraints
Decorators
Affix and hint actions
Revealable Password
Datalist
Live Updates
Validation
Common Options

Text input field with variants for email, password, numeric, tel, and URL.

use NyonCode\WireForms\Components\TextInput;

Basic Usage

TextInput::make('name')
TextInput::make('email')->email()
TextInput::make('password')->password()
TextInput::make('phone')->tel()
TextInput::make('website')->url()
TextInput::make('quantity')->numeric()
TextInput::make('age')->integer()

Type Variants

Method	HTML type	Description
`email()`	`email`	Email validation hint
`password()`	`password`	Masked input
`tel()`	`tel`	Phone number
`url()`	`url`	URL input
`numeric()`	`number` with inputmode	Numeric with decimal
`integer()`	`number` with inputmode	Integer only, step=1
`search()`	`search`	Search input
`type(string)`	Custom	Set HTML input type directly

Constraints

TextInput::make('code')
    ->minLength(3)
    ->maxLength(10)
    ->minValue(0)
    ->maxValue(100)
    ->step('0.01')
    ->mask('999-999-999')
    ->inputMode('numeric')
    ->autocomplete('off')

Decorators

TextInput::make('price')
    ->prefix('CZK')
    ->suffix('.00')
    ->prefixIcon('currency')
    ->suffixIcon('calculator')

Affix and hint actions

Place an interactive Action before/after the input or next to the hint. The callback runs on the server with the same reactive $get / $set context as afterStateUpdated() — use it for lookups (ARES, address verification), generating a value from another field, or an inline action:

use NyonCode\WireCore\Actions\Action;
 
TextInput::make('company')
    ->suffixAction(
        Action::make('lookup')
            ->icon('heroicon-o-magnifying-glass')
            ->action(fn ($get, $set) => $set('company', lookupCompany($get('company')))),
    )
    ->hintAction(
        Action::make('help')->icon('heroicon-o-question-mark-circle'),
    );

prefixAction(), suffixAction() and hintAction() each take an Action and share the field's state context. For a standalone button, use the Button field.

Revealable Password

TextInput::make('password')
    ->password()
    ->revealable()    // toggle visibility button

Datalist

TextInput::make('city')
    ->datalist(['Prague', 'Brno', 'Ostrava'])

Pass a PHP enum class to use its case labels as the suggestions (same label resolution as Select options):

TextInput::make('city')->datalist(City::class)

Live Updates

TextInput::make('search')
    ->live()
    ->debounce(300)

Validation

TextInput::make('username')
    ->required()
    ->rules(['alpha_dash', 'min:3', 'max:30'])
    ->validationMessages(['required' => 'Username is required'])

Common Options

TextInput::make('bio')
    ->label('Short bio')
    ->helperText('Displayed on your profile')
    ->hint('Max 255 chars')
    ->placeholder('Tell us about yourself')
    ->disabled(fn () => $this->locked)
    ->readOnly(fn () => ! auth()->user()->canEdit())
    ->autofocus()

See Common Field API for the full list of shared methods.