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

​
Basic Usage

use Filament\Forms\Components\TextInput;

TextInput::make('name')

​
Available Methods

​
email
method
Sets the input type to email and adds email validation.
TextInput::make('email')
    ->email()
​
numeric
method
Sets the input type to numeric and adds numeric validation.
TextInput::make('price')
    ->numeric()
​
integer
method
Sets the input type to integer and adds integer validation.
TextInput::make('quantity')
    ->integer()
​
password
method
Sets the input type to password.
TextInput::make('password')
    ->password()
​
tel
method
Sets the input type to tel and adds phone number validation.
TextInput::make('phone')
    ->tel()
​
url
method
Sets the input type to URL and adds URL validation.
TextInput::make('website')
    ->url()
​
type
method
Sets a custom HTML input type.
TextInput::make('color')
    ->type('color')
​
mask
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"'))
​
prefix
method
Adds text before the input.
TextInput::make('domain')
    ->prefix('https://')
​
suffix
method
Adds text after the input.
TextInput::make('domain')
    ->suffix('.com')
​
prefixIcon
method
Adds an icon before the input.
use Filament\Support\Icons\Heroicon;

TextInput::make('email')
    ->prefixIcon(Heroicon::Envelope)
​
suffixIcon
method
Adds an icon after the input.
use Filament\Support\Icons\Heroicon;

TextInput::make('website')
    ->suffixIcon(Heroicon::GlobeAlt)
​
prefixIconColor
method
Sets the color of the prefix icon.
TextInput::make('email')
    ->prefixIcon(Heroicon::Envelope)
    ->prefixIconColor('primary')
​
suffixIconColor
method
Sets the color of the suffix icon.
TextInput::make('status')
    ->suffixIcon(Heroicon::CheckCircle)
    ->suffixIconColor('success')
​
revealable
method
Makes password inputs revealable with a toggle button.
TextInput::make('password')
    ->password()
    ->revealable()
​
copyable
method
Adds a copy-to-clipboard button.
TextInput::make('apiKey')
    ->copyable(copyMessage: 'Copied!', copyMessageDuration: 1500)
​
datalist
method
Adds datalist autocomplete options.
TextInput::make('manufacturer')
    ->datalist(['BMW', 'Ford', 'Mercedes-Benz', 'Toyota'])
​
autocomplete
method
Sets the autocomplete attribute.
TextInput::make('password')
    ->password()
    ->autocomplete('new-password')
​
autocapitalize
method
Sets the autocapitalize attribute.
TextInput::make('name')
    ->autocapitalize('words')
​
inputMode
method
Sets the inputmode attribute.
TextInput::make('amount')
    ->numeric()
    ->inputMode('decimal')
​
step
method
Sets the step attribute for numeric inputs.
TextInput::make('price')
    ->numeric()
    ->step(0.01)
​
minValue
method
Sets the minimum value for numeric inputs.
TextInput::make('quantity')
    ->numeric()
    ->minValue(1)
​
maxValue
method
Sets the maximum value for numeric inputs.
TextInput::make('quantity')
    ->numeric()
    ->maxValue(100)
​
minLength
method
Sets the minimum length validation.
TextInput::make('name')
    ->minLength(2)
​
maxLength
method
Sets the maximum length validation.
TextInput::make('name')
    ->maxLength(255)
​
length
method
Sets the exact length validation.
TextInput::make('code')
    ->length(8)
​
telRegex
method
Sets a custom regex for tel validation.
TextInput::make('phone')
    ->tel()
    ->telRegex('/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\.\\/0-9]*$/')
​
currentPassword
method
Adds current password validation.
TextInput::make('current_password')
    ->password()
    ->currentPassword()
​
stripCharacters
method
Strips specific characters from the input.
TextInput::make('amount')
    ->mask(RawJs::make('$money($input)'))
    ->stripCharacters(',')
    ->numeric()
​
trim
method
Trims whitespace from the input.
TextInput::make('name')
    ->trim()
​
readOnly
method
Makes the input read-only.
TextInput::make('slug')
    ->readOnly()
​
placeholder
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)

Build docs developers (and LLMs) love

Get started for freeTalk to us