> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lunarphp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Creating Field Types

## Overview

There will likely come a point where you need more field types than what Lunar offers in the core. We've made adding your own a breeze and it's the same process whether you want to add these to directly to your app or via an add on.

Lunar will load up available field types via the `AttributeManifest`. This is a singleton which houses all the field types you can use. We currently have a handful in the core, with more being added in the future. If you need a field type that's not here, speak with us first in case it's in the pipeline.

## Create Your Field Type Class

Each FieldType is it's own class which implements the `FieldType` interface. So start by creating this class:

```php theme={null}
<?php

namespace App\FieldTypes;

use Lunar\Base\FieldType;

class ColourPicker implements FieldType
{
    //...
}
```

There are a number of methods you need to implement, which we'll go through here.

#### `getValue`

This will return the value from the `attribute_date` for display.

#### `setValue($value)`

The input value will be passed through here, so do any additional processing you need and then set the value property:

```php theme={null}
public function setValue($value)
{
   if ($this->hex($value)) {
     $value = $this->convertToRgb($value);
   }

   $this->value = $value;
}
```

#### `getLabel`

Return the display label for the field type, used when displaying in the admin hub.

#### `getConfig`

Return an array of configuration, gets passed to the settings view and saved against the attribute when edited.

#### `getSettingsView`

Return the reference to the settings view. Used in the hub when editing an attribute of for field type.

#### `getView`

Return the reference to the view when editing in the hub. i.e. on the product edit screen.

### Configuration

This should include any additional configuration your FieldType might need. If you need to store extra information that requires user input in the settings. You need to add them to the `option` array like so:

```php theme={null}
public function getConfig()
{
    return [
      'options' => [
        'available_colours' => 'nullable',
      ],
    ];
}
```

This will then tell the Livewire component to expect these fields for this FieldType and add the appropriate validation rules you specify.

### Settings View

The settings view is what staff will see when they are creating an attribute with this field type. Here you can define any extra configuration your field type may need when displayed for editing.

If your settings require input from the staff member, such as a text input or dropdown, these fields must be present in the config.

```php theme={null}
public function getConfig()
{
    return [
      'options' => [
        'available_colours' => 'nullable',
      ],
    ];
}
```

We can this rig this up in our settings view:

```html theme={null}
<div>
  <label>Available Colours</label>
  <input type="text" wire:model="attribute.configuration.available_colours" />
</div>
```

### Edit View

When a staff member is editing something such as a product, we need to be able to show the correct type of input for our field type.

In this view we have access to the `$field` variable, which contains everything we need for data binding.

```blade theme={null}
{{ $field['signature'] }} // Contains the signature for wire:model
{{ $field['data'] }} // The current data taken from the `attribute_data` column
```

Using the above we might have a view that looks like this:

```blade theme={null}
<input type="text" wire:model="{{ $field['signature'] }}" />
```

You will also have access to the `$language` variable, which is generally used on translated attributes. This will be the language code such as `en`

## Registering Your FieldType

Once you've made the FieldType, you need to register it. Typically this could done in a service provider:

```php theme={null}
\Lunar\Facades\FieldTypeManifest::add(
  ColourFieldType::class
);
```

## Registering FieldType Assets

If you need to register styles or scripts, you can do so in a service provider. More on this topic in [registering assets](/0.x/admin-hub/assets).

```php theme={null}
// Register compiled script
LunarHub::script('lunar-package', __DIR__.'/../dist/lunar-package.js');

// Register remote script
LunarHub::remoteScript('https://example.com/script.js');

// Register compiled styles
LunarHub::style('lunar-package', __DIR__.'/../dist/lunar-package.css');

// Register remote styles
LunarHub::remoteStyle('https://example.com/style.css');
```