diff --git a/src/Forms/ListboxField.php b/src/Forms/ListboxField.php
index 66b896b134c..20462f6cd99 100644
--- a/src/Forms/ListboxField.php
+++ b/src/Forms/ListboxField.php
@@ -43,6 +43,9 @@ class ListboxField extends MultiSelectField
      */
     protected $disabledItems = [];
 
+
+    protected $schemaComponent = 'ListboxField';
+
     /**
      * Creates a new dropdown field.
      *
@@ -58,6 +61,8 @@ public function __construct($name, $title = '', $source = [], $value = null, $si
             $this->setSize($size);
         }
 
+        $this->addExtraClass('ss-listbox-field');
+
         parent::__construct($name, $title, $source, $value);
     }
 
@@ -101,6 +106,7 @@ public function getOptions()
 
         $options = new ArrayList($options);
         $this->extend('updateGetOptions', $options);
+
         return $options;
     }
 
@@ -158,4 +164,109 @@ public function getDisabledItems()
     {
         return $this->disabledItems;
     }
+
+     /**
+     * Provide ListboxField data to the JSON schema for the frontend component
+     *
+     * @return array
+     */
+    public function getSchemaDataDefaults()
+    {
+        $options = $this->getOptions()->filter('Selected', true);
+        $name = $this->getName();
+        $schema = array_merge(
+            parent::getSchemaDataDefaults(),
+            [
+                'name' => $name,
+                'lazyLoad' => false,
+                'creatable' => false,
+                'multi' => true,
+                'value' => $options->count() ? $options->toNestedArray() : null,
+                'disabled' => $this->isDisabled() || $this->isReadonly(),
+            ]
+        );
+
+        $schema['options'] = array_values($this->getOptions()->toNestedArray() ?? []);
+
+        return $schema;
+    }
+
+    public function getSchemaStateDefaults()
+    {
+        $data = parent::getSchemaStateDefaults();
+
+        // Add options to 'data'
+        $data['lazyLoad'] = false;
+        $data['multi'] = true;
+        $data['creatable'] = false;
+        $options = $this->getOptions(true);
+        $data['value'] = $options->count() ? $options->toNestedArray() : null;
+
+        return $data;
+    }
+
+    /**
+     * Returns array of arrays representing tags.
+     *
+     * @param  string $term
+     * @return array
+     */
+    protected function getOptionsArray($term)
+    {
+        $source = $this->getSourceList();
+        if (!$source) {
+            return [];
+        }
+
+        $titleField = $this->getTitleField();
+
+        $query = $source
+            ->filter($titleField . ':PartialMatch:nocase', $term)
+            ->sort($titleField);
+
+        // Map into a distinct list
+        $items = [];
+        $titleField = $this->getTitleField();
+
+        foreach ($query->map('ID', $titleField)->values() as $title) {
+            $items[$title] = [
+                'Title' => $title,
+                'Value' => $title,
+            ];
+        }
+
+        return array_values($items ?? []);
+    }
+
+    public function getValueArray()
+    {
+        $value = $this->Value();
+        $validValues = $this->getValidValues();
+        if (empty($validValues)) {
+            return [];
+        }
+
+        $canary = reset($validValues);
+        if (is_array($value) && count($value) > 0 ) {
+            $first = reset($value);
+            // sanity check the values - make sure strings get strings, ints get ints etc
+            if (gettype($canary) !== gettype($first)) {
+                $replaced = [];
+                foreach ($value as $item) {
+
+                    if (!is_array($item)) {
+                        $item = json_decode($item, true);
+                    }
+
+                    if (isset($item['Value'])) {
+                        $replaced[] = $item['Value'];
+                    }
+                }
+
+                $value = $replaced;
+            }
+        }
+
+        return $this->getListValues($value);
+    }
 }