# Custom field

## Forget the label, help and error messages.

Don't create code for labels, help or error messages when creating a custom field, it's automatically added by the form component.

## Extend existing component, instead of creating a custom field

If you are looking to change the styling of an existing field it is enough to extend the fields Blade Class or create your own theme.

## Steps to create a custom field

### 1. Create a Field class that extends BaseField

* Name your class in a **non-conflicting** and descriptive way
* add the `$type` property,  best practice is to slug case the class name.

```php
namespace YourNameSpace;

use Tanthammar\TallForm\BaseField;

class MyField extends BaseField
{
    public $specialProp; //example adding your own properties

    // all properties that exists in BaseField or its traits should be set in the overrides() method.
    public function overrides(): self
    {
       $this->type = 'my-field'; //required property!
       return $this;
    }

    //now your field has access to all BaseField methods, you can override them or add your own
    public function specialProp($prop): self
    {
        $this->specialProp = $prop;
        return $this;
    }
}
```

### 2. Create a **Blade component class**, with the **same name**

 Extend  BaseBladeField

```php
use Illuminate\View\View;
use Illuminate\View\Component;
use Tanthammar\TallForms\Traits\BaseBladeField;

class MyField extends BaseBladeField 
{     
    public function __construct(
        public array|object      $field = [],
        public array             $attr = []
    )
    {
        parent::__construct((array)$field, $attr);
        $this->attr = array_merge($this->inputAttributes(), $attr);
    }
    
    //add defaults for headless use cases
    protected function defaults(): array
    {
        return [
            'id' => 'select', //input name and wire:model is autogenerated from the id attribute
            'placeholder' => 'my placeholder',
            'class' => 'form-input my-1 w-full shadow', //error class is autogenerated in BaseBladeField
            'wrapperClass' => null,
            'disabled' => false,
        ];
    }
    
    //add input attributes
    protected function inputAttributes(): array
    {
        $custom = data_get($this->field, 'attributes.input', []); //support field->inputAttr()
        $default = [
            $this->field->wire => $this->field->key,
            'id' => $this->field->id,
            'name' => $this->field->name
        ];
        return array_merge($default, $custom);
    }
    
    public function render(): View
    {
        return view('components.my-field'); //observe the file name
    }
}
```

### 3. Create a blade component view

* `resources/views/components/my-field.blade.php`. 
* ***Name the view the same as the field `$type`***.
* You have access to all the `$field` attributes and methods, in your blade view.

Example using an input field based on `MyField` blade component class:

```markup
<div>
    <div>{{ $field->specialProp }}</div>
    <input
        @if($field->disabled) disabled @endif
        {{ $attributes->except([...array_keys($attr), 'disabled'])
            ->merge($attr)
            ->merge(['class' => $errors->has($field->key) ? $field->errorClass : $field->class ]) 
        }} />
</div>
```

### 4. Use your field in a form component

```
MyField::make(...)
```

## Please share your field!

If you make a new field. Please share it! Make a PR or paste the code in an issue, and I'll add it to the package.


---

# 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/field/custom-field.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.