Inputs

Provide Inputs

To provide inputs, you must define them into your CRUD component which has been located in app/CRUD/ directory.

There is a method called inputs() which allows you to define crud inputs for Create and Update page!

Simple inputs

You can easily pass your model property as key and input name as value to make a simple input for your CRUD. For example:

public function inputs(){
    return [
        'name' => 'text',
        'image' => 'file',
        'email' => 'email',
        'active' => 'checkbox',
        'expire_time' => 'datetime',
        'birth_day' => 'date',
        'notify_time' => 'time',
        'status' => ['select' => [
            'accepted' => 'Accepted :)',
            'rejected' => 'Rejected :(',
            'pending' => 'Pending!',
        ]],
    ];
}

And that's it! This code will generate a simple form that includes 4 inputs.

Available types

  • Ckeditor
  • Checkbox
  • Text
  • Select
  • File
  • Password
  • Number
  • Email
  • Date
  • Datetime
  • Time
  • Textarea

Inputs, but pro!

You can create inputs as simple as possible as you want, but there is more customizability to make better inputs!

All of these inputs have EasyPanel\Parsers\HTMLInputs namespace and start with label() method as a static method

Text

public function inputs(){
    return [
        'title' => Text::label('Title of Article')
    ];
}

Placeholder

public function inputs(){
    return [
        'title' => Text::label('Title of Article')
            ->placeholder('Please enter the title of article...')
    ];
}

Input custom style

public function inputs(){
    return [
        'title' => Text::label('Title of Article')
            ->inputStyle('border border-primary')
    ];
}

Label styles

With labelStyle() you will be able to apply some custom classes to the <label> tag.

public function inputs(){
    return [
        'title' => Text::label('Title of Article')
            ->labelStyle('text-warning font-20')
    ];
}

Autocomplete input

In default, the autocomplete attribute is set to on, but you can turn it off.

public function inputs(){
    return [
        'title' => Text::label('Title of Article')
            ->inputStyle('border border-primary')
            ->withoutAutocomplete()
    ];
}

Or, there is a replacement for withoutAutocomplete called withoutAutofill:

public function inputs(){
    return [
        'email' => Email::label('Email')
            ->placeholder("User's email...")
            ->inputStyle('border border-primary')
            ->withoutAutofill()
    ];
}

Input Mode

Livewire has 3 different modes for its inputs:

  • wire:model
  • wire:model.lazy
  • wire:model.defer

And you can create your inputs based on your needs, for example, you want to use different modes for each input you can do it easy:

public function inputs(){
    return [
        'expired_at' => Datetime::label('Expiration time')
                        ->lazyMode(), // it will use wire:model.lazy for input
        
        'name' => Text::label('Name')
                    ->deferMode(), // it will use wire:model.defer for input
                    
        'email' => Email::label('email')
                    ->normalMode() // it will use wire:model for input
    ];
}

If you don't pass anything, it will decide based on your config file and easy_panel.lazy_mode key, if it is true all of the inputs will render by wire:model.lazy and if it is false all of them will render by wire:model.

Input classes list:
  • EasyPanel\Parsers\HTMLInputs\Text
  • EasyPanel\Parsers\HTMLInputs\Ckeditor
  • EasyPanel\Parsers\HTMLInputs\Checkbox
  • EasyPanel\Parsers\HTMLInputs\Select
  • EasyPanel\Parsers\HTMLInputs\File
  • EasyPanel\Parsers\HTMLInputs\Password
  • EasyPanel\Parsers\HTMLInputs\Number
  • EasyPanel\Parsers\HTMLInputs\Email
  • EasyPanel\Parsers\HTMLInputs\Date
  • EasyPanel\Parsers\HTMLInputs\Datetime
  • EasyPanel\Parsers\HTMLInputs\Time
  • EasyPanel\Parsers\HTMLInputs\Textarea