Skip to content

Input.md

Latest commit

 

History

History
163 lines (116 loc) · 2.86 KB

Input.md

File metadata and controls

163 lines (116 loc) · 2.86 KB

Input

The Input component provides a standard text input field with various customization options such as icons, prefixes, and suffixes.

Basic Usage

use TallStackUIFilament\Forms\Components\Input;

Input::make('name')
    ->label('Full Name'),

Input Types

Change the input type using the type() method:

Input::make('email')
    ->type('email'),
    
Input::make('website')
    ->type('url'),
    
Input::make('age')
    ->type('number'),
    
Input::make('search')
    ->type('search'),
    
Input::make('phone')
    ->type('tel'),

Icons

Add an icon to the input field with the icon() method:

Input::make('search')
    ->icon('users'),

You can use any icon configured in tallstackui

Icon Position

Control the position of the icon with the iconPosition() method:

Input::make('email')
    ->icon('envelope')
    ->iconPosition('left'), // Default
    
Input::make('search')
    ->icon('magnifying-glass')
    ->iconPosition('right'),

You can also use the Filament IconPosition enum:

use Filament\Support\Enums\IconPosition;

Input::make('email')
    ->icon('heroicon-o-envelope')
    ->iconPosition(IconPosition::Before), // 'left'
    
Input::make('search')
    ->icon('heroicon-o-magnifying-glass')
    ->iconPosition(IconPosition::After), // 'right'

Prefix and Suffix

Add text before or after the input with prefix and suffix:

Input::make('price')
    ->prefix('$'),
    
Input::make('weight')
    ->suffix('kg'),
    
Input::make('domain')
    ->prefix('https://')
    ->suffix('.com'),

You can use closures for dynamic content:

Input::make('price')
    ->prefix(fn () => '$'),
    
Input::make('domain')
    ->suffix(fn () => auth()->user()->default_domain),

Placeholder

Add a placeholder to guide users:

Input::make('name')
    ->placeholder('John Doe'),

Clearable

Allow users to clear the input with a single click:

Input::make('search')
    ->clearable(),

Combining Features

use TallStackUIFilament\Forms\Components\Input;
use Filament\Support\Enums\IconPosition;

Input::make('social_url')
    ->label('Social Media URL')
    ->type('url')
    ->icon('globe-alt')
    ->iconPosition(IconPosition::Before)
    ->prefix('https://')
    ->placeholder('twitter.com/username')
    ->clearable()
    ->required(),

Validation

Add validation rules as needed:

Input::make('email')
    ->type('email')
    ->required()
    ->email()
    ->unique(),
    
Input::make('username')
    ->required()
    ->minLength(3)
    ->maxLength(20)
    ->regex('/^[a-z0-9_-]+$/i'),

Additional Input Attributes

Add custom HTML attributes to the input element:

Input::make('name')
    ->extraInputAttributes([
        'autocomplete' => 'name',
        'data-analytics-id' => 'name-field',
    ]),