# As modal

### Extend the TallFormInModal component

* The modal can be placed anywhere but for `z-index` reasons, it's best to put it near the closing `</body>` tag.
* The component automatically loads the model and resets the form when the listener receives the emitted event.&#x20;
* You have access to all TallForms methods and properties except the `$headView`.

### Steps

* [ ] Create component that extends `TallFormInModal`
* [ ] Create a button with `wire:click` `emitTo` and add the form component to the same page
* [ ] (Optionally override the modal methods.)

### Create the form

Command option `--action=modal` will set the component to extend `TallFormInModal.` See [Standard](/tall-forms/form/form-types/standard-form.md) form, for more options

```bash
php artisan make:tall-form UserModalForm --action=modal --model=User
```

```php
namespace App\Http\Livewire\Forms;

use App\Models\User;
use Tanthammar\TallForms\Input;
use Tanthammar\TallForms\TallFormInModal;

class UserModalForm extends TallFormInModal
{
     /*
     * button color presets:
     * white, indigo, blue, green, yellow, red, gray, orange, teal, info, success, danger, warning, primary, secondary
     public string $closeBtnColor = 'white';
     public string $submitBtnColor = 'primary';

     * Methods to override
     public function loadModal(int|string $modelKey): void
     public function closeModal(): void
     public function modalSubmit(): void
     */
    
    public function mount()
    {
        $this->mount_form(new User);
    }

    protected function formAttr(): array
    {
        return [
           'formTitle' => 'Edit user',
           'formSubtitle' => 'Form Subtitle slot',
           'modalMaxWidth' => 'xl', //default = 'lg', options: sm, md, lg, xl, 2xl
       ];
    }
    
    protected function fields(): array
    {
        return [
            Input::make('Name')->rules('required'),
        ];
    }
}
```

### Create a button and pass a $modelKey

Add a button to any blade view, that `$emits` a `$model->id` to your Form component

```markup
//Example, emit to the form component, to load the User where id=1
//put this button in any blade view
<x-tall-button 
    size="md" 
    color="primary" 
    wire:click="$emitTo('forms.user-modal-form', 'openModal', 1)"
    text="Open Form Modal" />
```

### Add the modal form component

The button and the form component does **not** have to be in the same Livewire component, but for z-index reasons, it is best placed near the closing `</body>` tag.

```markup
<livewire:forms.user-modal-form/>
```

### Button colors

Available presets: `white, indigo, blue, green, yellow, red, gray, orange, teal, info, success, danger, warning, primary, secondary.` \
Set the colors in tall-form.css

```php
public string $closeBtnColor = 'white';
public string $submitBtnColor = 'primary';
```

### Override methods

You can override the default methods

```php
public function loadModal(int|string $modelKey): void
public function closeModal(): void
public function modalSubmit(): void
```

### Styling

Search for `Modals` in `tall-theme.css`The modal styling is based on the Laravel Jetstream modal component.

### Modal sizes

* Set the `modalMaxWidth` in the `formAttr()` function.&#x20;
* Available options are; `sm, md, lg, xl, 2xl`
* Default = `lg`
* You can change the defaults in config.

```php
    protected function formAttr(): array
    {
        return [
           'modalMaxWidth' => 'xl',
       ];
    }
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tina-hammar.gitbook.io/tall-forms/form/form-types/modal.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.