1 files changed, 60 insertions, 0 deletions
diff --git a/doc/development/fe_guide/droplab/plugins/input_setter.md b/doc/development/fe_guide/droplab/plugins/input_setter.md
new file mode 100644
index 00000000000..a549603c20d
--- /dev/null
+++ b/doc/development/fe_guide/droplab/plugins/input_setter.md
@@ -0,0 +1,60 @@
+# InputSetter
+
+`InputSetter` is a plugin that allows for udating DOM out of the scope of droplab when a list item is clicked.
+
+## Usage
+
+Add the `InputSetter` object to the plugins array of a `DropLab.prototype.init` or `DropLab.prototype.addHook` call.
+
+* `InputSetter` requires a config value for `input` and `valueAttribute`.
+* `input` should be the DOM element that you want to manipulate.
+* `valueAttribute` should be a string that is the name of an attribute on your list items that is used to get the value
+to update the `input` element with.
+
+You can also set the `InputSetter` config to an array of objects, which will allow you to update multiple elements.
+
+
+```html
+<input id="input" value="">
+<div id="div" data-selected-id=""></div>
+
+<input href="#" id="trigger" data-dropdown-trigger="#list">
+<ul id="list" data-dropdown data-dynamic>
+  <li><a href="#" data-id="{{id}}">{{text}}</a></li>
+<ul>
+```
+```js
+  const droplab = new DropLab();
+
+  const trigger = document.getElementById('trigger');
+  const list = document.getElementById('list');
+
+  const input = document.getElementById('input');
+  const div = document.getElementById('div');
+
+  droplab.init(trigger, list, [InputSetter], {
+    InputSetter: [{
+      input: input,
+      valueAttribute: 'data-id',
+    } {
+      input: div,
+      valueAttribute: 'data-id',
+      inputAttribute: 'data-selected-id',
+    }],
+  });
+
+  droplab.addData('trigger', [{
+    id: 0,
+    text: 'Jacob',
+  }, {
+    id: 1,
+    text: 'Jeff',
+  }]);
+```
+
+Above, if the second list item was clicked, it would update the `#input` element
+to have a `value` of `1`, it would also update the `#div` element's `data-selected-id` to `1`.
+
+Optionally you can set `inputAttribute` to a string that is the name of an attribute on your `input` element that you want to update.
+If you do not provide an `inputAttribute`, `InputSetter` will update the `value` of the `input` element if it is an `INPUT` element,
+or the `textContent` of the `input` element if it is not an `INPUT` element.