TextInput

The text input component allows you to interact with a string value.

Basic Usage

use Filament\Forms\Components\TextInput;

TextInput::make('name')

Available Methods

method

Sets the input type to email and adds email validation.

TextInput::make('email')
    ->email()

method

Sets the input type to numeric and adds numeric validation.

TextInput::make('price')
    ->numeric()

method

Sets the input type to integer and adds integer validation.

TextInput::make('quantity')
    ->integer()

method

Sets the input type to password.

TextInput::make('password')
    ->password()

method

Sets the input type to tel and adds phone number validation.

TextInput::make('phone')
    ->tel()

method

Sets the input type to URL and adds URL validation.

TextInput::make('website')
    ->url()

method

Sets a custom HTML input type.

TextInput::make('color')
    ->type('color')

method

Applies an input mask using Alpine.js.

use Filament\Support\RawJs;

TextInput::make('birthday')
    ->mask('99/99/9999')
    ->placeholder('MM/DD/YYYY')

TextInput::make('cardNumber')
    ->mask(RawJs::make('$input.startsWith("34") ? "9999 999999 99999" : "9999 9999 9999 9999"'))

method

Adds text before the input.

TextInput::make('domain')
    ->prefix('https://')

method

Adds text after the input.

TextInput::make('domain')
    ->suffix('.com')

method

Adds an icon before the input.

use Filament\Support\Icons\Heroicon;

TextInput::make('email')
    ->prefixIcon(Heroicon::Envelope)

method

Adds an icon after the input.

use Filament\Support\Icons\Heroicon;

TextInput::make('website')
    ->suffixIcon(Heroicon::GlobeAlt)

method

Sets the color of the prefix icon.

TextInput::make('email')
    ->prefixIcon(Heroicon::Envelope)
    ->prefixIconColor('primary')

method

Sets the color of the suffix icon.

TextInput::make('status')
    ->suffixIcon(Heroicon::CheckCircle)
    ->suffixIconColor('success')

method

Makes password inputs revealable with a toggle button.

TextInput::make('password')
    ->password()
    ->revealable()

method

Adds a copy-to-clipboard button.

TextInput::make('apiKey')
    ->copyable(copyMessage: 'Copied!', copyMessageDuration: 1500)

method

Adds datalist autocomplete options.

TextInput::make('manufacturer')
    ->datalist(['BMW', 'Ford', 'Mercedes-Benz', 'Toyota'])

method

Sets the autocomplete attribute.

TextInput::make('password')
    ->password()
    ->autocomplete('new-password')

method

Sets the autocapitalize attribute.

TextInput::make('name')
    ->autocapitalize('words')

method

Sets the inputmode attribute.

TextInput::make('amount')
    ->numeric()
    ->inputMode('decimal')

method

Sets the step attribute for numeric inputs.

TextInput::make('price')
    ->numeric()
    ->step(0.01)

method

Sets the minimum value for numeric inputs.

TextInput::make('quantity')
    ->numeric()
    ->minValue(1)

method

Sets the maximum value for numeric inputs.

TextInput::make('quantity')
    ->numeric()
    ->maxValue(100)

method

Sets the minimum length validation.

TextInput::make('name')
    ->minLength(2)

method

Sets the maximum length validation.

TextInput::make('name')
    ->maxLength(255)

method

Sets the exact length validation.

TextInput::make('code')
    ->length(8)

method

Sets a custom regex for tel validation.

TextInput::make('phone')
    ->tel()
    ->telRegex('/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\.\\/0-9]*$/')

method

Adds current password validation.

TextInput::make('current_password')
    ->password()
    ->currentPassword()

method

Strips specific characters from the input.

TextInput::make('amount')
    ->mask(RawJs::make('$money($input)'))
    ->stripCharacters(',')
    ->numeric()

method

Trims whitespace from the input.

TextInput::make('name')
    ->trim()

method

Makes the input read-only.

TextInput::make('slug')
    ->readOnly()

method

Sets the placeholder text.

TextInput::make('name')
    ->placeholder('Enter your name')

Common Patterns

Email Input

TextInput::make('email')
    ->email()
    ->required()
    ->maxLength(255)

Password Input

TextInput::make('password')
    ->password()
    ->revealable()
    ->required()
    ->minLength(8)

Numeric Input with Range

TextInput::make('quantity')
    ->numeric()
    ->minValue(1)
    ->maxValue(100)
    ->default(1)

Currency Input

use Filament\Support\RawJs;

TextInput::make('price')
    ->prefix('$')
    ->numeric()
    ->minValue(0)
    ->step(0.01)

Phone Number Input

TextInput::make('phone')
    ->tel()
    ->maxLength(20)

Form Components

Table Components

Layout Components

Infolist Components

Basic Usage

Available Methods

Common Patterns

Email Input

Password Input

Numeric Input with Range

Currency Input

Phone Number Input

​Basic Usage

​Available Methods

​Common Patterns

​Email Input

​Password Input

​Numeric Input with Range

​Currency Input

​Phone Number Input

Basic Usage

Available Methods

Common Patterns

Email Input

Password Input

Numeric Input with Range

Currency Input

Phone Number Input