diff --git a/packages/junipero/lib/TagsField/index.js b/packages/junipero/lib/TagsField/index.js
new file mode 100644
index 000000000..06a8d2e94
--- /dev/null
+++ b/packages/junipero/lib/TagsField/index.js
@@ -0,0 +1,446 @@
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useReducer,
+  useRef,
+} from 'react';
+import PropTypes from 'prop-types';
+
+import { classNames, mockState } from '../utils';
+import { useTimeout } from '../hooks';
+import Dropdown from '../Dropdown';
+import DropdownMenu from '../DropdownMenu';
+import DropdownToggle from '../DropdownToggle';
+import DropdownItem from '../DropdownItem';
+
+const TagsField = forwardRef(({
+  autoFocus,
+  className,
+  label,
+  options,
+  placeholder,
+  search,
+  autoAddOnBlur = false,
+  disabled = false,
+  forceLabel = false,
+  noSearchResults = 'No result found :(',
+  onlyAllowSearchResults = false,
+  onlyAllowOneOccurence = true,
+  required = false,
+  searchMinCharacters = 2,
+  searchThreshold = 400,
+  value,
+  onBlur = () => {},
+  onChange = () => {},
+  onFocus = () => {},
+  onKeyDown = () => {},
+  onKeyPress = () => {},
+  parseValue = val => val?.trim?.() || val,
+  parseTitle = val => val,
+  validate = val => !!val?.length || !required,
+  validateInput = val => !!val?.trim?.(),
+  validateTag = val => !!val,
+}, ref) => {
+  const innerRef = useRef();
+  const wrapperRef = useRef();
+  const inputRef = useRef();
+  const dropdownRef = useRef();
+  const menuRef = useRef();
+  const [state, dispatch] = useReducer(mockState, {
+    value: value || [],
+    valid: validate(value || []) && (value || []).every(t => validateTag(t)),
+    availableOptions: options,
+    inputValue: '',
+    inputValid: true,
+    inputDirty: false,
+    dirty: false,
+    focused: autoFocus ?? false,
+    searchResults: null,
+    searching: false,
+    opened: false,
+  });
+
+  useImperativeHandle(ref, () => ({
+    innerRef,
+    wrapperRef,
+    inputRef,
+    dropdownRef,
+    menuRef,
+    internalValue: state.value,
+    inputValue: state.inputValue,
+    dirty: state.dirty,
+    opened: state.opened,
+    searchResults: state.searchResults,
+    searching: state.searching,
+    valid: state.valid,
+    focus,
+    blur,
+    reset,
+    add,
+    remove,
+  }));
+
+  useEffect(() => {
+    state.value = value || [];
+
+    dispatch({
+      value: state.value,
+      valid: validate(state.value) && state.value.every(t => validateTag(t)),
+    });
+  }, [value]);
+
+  useTimeout(() => {
+    search_();
+  }, searchThreshold, [state.inputValue]);
+
+  const onInputChange_ = e => {
+    dispatch({
+      inputValue: e.target.value,
+      inputDirty: true,
+      inputValid: validateInput(e.target.value),
+      searching: !!search,
+    });
+
+    if (!e.target.value.trim() && !!search && !options) {
+      dropdownRef.current?.close();
+    }
+  };
+
+  const onInputFocus_ = e => {
+    dispatch({ focused: true });
+
+    if (
+      (state.searchResults && state.inputValue) ||
+      state.availableOptions?.length
+    ) {
+      dropdownRef.current?.open();
+    }
+
+    onFocus(e);
+  };
+
+  const onInputBlur_ = e => {
+    dispatch({ focused: false });
+
+    if (state.inputValue && autoAddOnBlur && validateInput(state.inputValue)) {
+      add(state.inputValue);
+    }
+
+    onBlur(e);
+  };
+
+  const onKeyPress_ = e => {
+    if (disabled) {
+      return;
+    }
+
+    if (
+      e.key === 'Enter' &&
+      !onlyAllowSearchResults &&
+      validateInput(state.inputValue)
+    ) {
+      add(state.inputValue);
+    }
+
+    onKeyPress(e);
+  };
+
+  const onKeyDown_ = e => {
+    if (disabled) {
+      return;
+    }
+
+    if (
+      (e.key === 'Backspace' || e.key === 'ArrowLeft') &&
+      !state.inputValue.trim() &&
+      state.value.length
+    ) {
+      focus(state.value.length - 1);
+    }
+
+    onKeyDown(e);
+  };
+
+  const onTagKeyDown_ = (index, e) => {
+    if (disabled) {
+      return;
+    }
+
+    if (e.key === 'Backspace') {
+      remove(index);
+      inputRef.current?.focus();
+    } else if (e.key === 'ArrowLeft' && index > 0) {
+      focus(index - 1);
+    } else if (e.key === 'ArrowRight') {
+      focus(index + 1);
+    }
+  };
+
+  const onWrapperClick_ = e => {
+    if (disabled || e.target !== wrapperRef.current) {
+      return;
+    } else {
+      e.preventDefault();
+    }
+
+    focus();
+  };
+
+  const onDropdownToggle_ = ({ opened }) =>
+    dispatch({ opened });
+
+  const onOptionClick_ = (option, e) => {
+    e.preventDefault();
+
+    add(option);
+  };
+
+  const add = item => {
+    if (disabled || (typeof item === 'string' && !item.trim())) {
+      return;
+    }
+
+    state.value.push(item);
+    state.availableOptions = options?.filter(o =>
+      !onlyAllowOneOccurence ||
+      !state.value.find(i => parseValue(i) === parseValue(o)));
+
+    dispatch({
+      value: state.value,
+      valid: validate(state.value) && state.value.every(t => validateTag(t)),
+      availableOptions: state.availableOptions,
+      inputValue: '',
+      inputDirty: false,
+      inputValid: true,
+      dirty: true,
+    });
+    onChange({ value: state.value.map(i => parseValue(i)) });
+
+    if (state.searchResults) {
+      dispatch({ searchResults: null, searching: false });
+      dropdownRef.current?.close();
+    }
+  };
+
+  const remove = (index, e) => {
+    e?.preventDefault?.();
+
+    if (disabled) {
+      return;
+    }
+
+    state.value.splice(index, 1);
+    state.availableOptions = options?.filter(o =>
+      !onlyAllowOneOccurence ||
+      !state.value.find(i => parseValue(i) === parseValue(o)));
+
+    dispatch({
+      value: state.value,
+      valid: validate(state.value) && state.value.every(t => validateTag(t)),
+      availableOptions: state.availableOptions,
+      dirty: true,
+    });
+    onChange({ value: state.value.map(i => parseValue(i)) });
+  };
+
+  const focus = index => {
+    if (index >= 0 && index < state.value.length) {
+      innerRef.current
+        ?.querySelector(`.tag:nth-child(${index + 1})`)?.focus?.();
+    } else {
+      inputRef.current?.focus();
+    }
+  };
+
+  const blur = () => {
+    inputRef.current?.blur();
+    innerRef.current?.querySelector('.tag:focus')?.blur();
+  };
+
+  const reset = () => {
+    state.value = value || [];
+
+    dispatch({
+      value: state.value,
+      dirty: false,
+      valid: validate(state.value) && state.value.every(t => validateTag(t)),
+      inputValue: '',
+      inputDirty: false,
+      inputValid: true,
+    });
+  };
+
+  const search_ = async () => {
+    if (!state.inputValue) {
+      dispatch({ searching: false, searchResults: null });
+    }
+
+    if (!search || state.inputValue?.length < searchMinCharacters) {
+      return;
+    }
+
+    const results = await search(state.inputValue);
+    dispatch({ searchResults: results, searching: false });
+    dropdownRef.current?.open();
+  };
+
+  const isEmpty = () =>
+    !state.inputValue && !state.value.length;
+
+  const renderOption = (o, index) => (
+    <DropdownItem
+      key={index}
+      tabIndex={0}
+    >
+      <a
+        href="#"
+        onClick={onOptionClick_.bind(null, o)}
+        tabIndex={-1}
+      >
+        { parseTitle(o) }
+      </a>
+    </DropdownItem>
+  );
+
+  return (
+    <div
+      ref={innerRef}
+      className={classNames(
+        'junipero',
+        'field',
+        'tags-input',
+        {
+          focused: state.focused,
+          labeled: !!label,
+          'label-enforced': forceLabel,
+          dirty: state.dirty || state.inputDirty,
+          empty: isEmpty(),
+          searching: state.searching,
+          'with-search': !!search,
+          invalid: (!state.valid && state.dirty) ||
+            (!state.inputValid && state.inputDirty),
+          disabled,
+        },
+        className,
+      )}
+    >
+      <div ref={wrapperRef} className="wrapper" onMouseDown={onWrapperClick_}>
+        { state.value.map?.((tag, i) => (
+          <span
+            tabIndex={0}
+            key={i}
+            className={classNames(
+              'tag',
+              {
+                invalid: !validateTag(tag),
+              },
+            )}
+            onKeyDown={onTagKeyDown_.bind(null, i)}
+          >
+            { parseTitle(tag) }
+            <a
+              tabIndex={-1}
+              className="remove"
+              href="#"
+              onClick={remove.bind(null, i)}
+            />
+          </span>
+        ))}
+        <div className="input">
+          <input
+            type="text"
+            value={state.inputValue}
+            ref={inputRef}
+            onChange={onInputChange_}
+            onKeyPress={onKeyPress_}
+            onKeyDown={onKeyDown_}
+            onFocus={onInputFocus_}
+            onBlur={onInputBlur_}
+            autoFocus={autoFocus}
+            disabled={disabled}
+          />
+          { !state.inputValue && placeholder && (
+            <span className="placeholder">{ placeholder }</span>
+          )}
+        </div>
+        <span className="label">{ label || placeholder }</span>
+      </div>
+
+      { (search || state.availableOptions?.length) && (
+        <Dropdown
+          opened={state.opened}
+          ref={dropdownRef}
+          onToggle={onDropdownToggle_}
+          clickOutsideTarget={wrapperRef.current}
+        >
+          <DropdownToggle tag="div" trigger="manual" tabIndex={-1} />
+          <DropdownMenu ref={menuRef}>
+            { state.searchResults ? (
+              <div className="search-results">
+                { state.searchResults.length
+                  ? state.searchResults
+                    ?.map((o, index) => renderOption(o, index))
+                  : (
+                    <div className="no-results">{ noSearchResults }</div>
+                  ) }
+              </div>
+            ) : (
+              <div className="items">
+                { state.availableOptions
+                  .map((o, index) => renderOption(o, index)) }
+              </div>
+            ) }
+          </DropdownMenu>
+        </Dropdown>
+      )}
+    </div>
+  );
+});
+
+TagsField.propTypes = {
+  autoFocus: PropTypes.bool,
+  autoAddOnBlur: PropTypes.bool,
+  autoSearchOnFocus: PropTypes.bool,
+  disabled: PropTypes.bool,
+  forceLabel: PropTypes.bool,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.node,
+    PropTypes.func,
+    PropTypes.bool,
+  ]),
+  noSearchResults: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.node,
+    PropTypes.func,
+  ]),
+  onlyAllowSearchResults: PropTypes.bool,
+  onlyAllowOneOccurence: PropTypes.bool,
+  options: PropTypes.array,
+  placeholder: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.node,
+    PropTypes.func,
+  ]),
+  required: PropTypes.bool,
+  search: PropTypes.func,
+  searchMinCharacters: PropTypes.number,
+  searchThreshold: PropTypes.number,
+  validate: PropTypes.func,
+  validateInput: PropTypes.func,
+  validateTag: PropTypes.func,
+  value: PropTypes.array,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  parseTitle: PropTypes.func,
+  parseValue: PropTypes.func,
+};
+
+export default TagsField;
diff --git a/packages/junipero/lib/TagsField/index.stories.js b/packages/junipero/lib/TagsField/index.stories.js
new file mode 100644
index 000000000..0b1e71003
--- /dev/null
+++ b/packages/junipero/lib/TagsField/index.stories.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+import TagsField from './index';
+
+export default { title: 'junipero/TagsField' };
+
+const options = [
+  { title: 'One', value: 'one' },
+  { title: 'Two', value: 'two' },
+  { title: 'Three', value: 'three' },
+];
+
+const search = [
+  { title: 'Four', value: 'four' },
+  { title: 'Five', value: 'five' },
+  { title: 'Six', value: 'six' },
+];
+
+export const basic = () => (
+  <TagsField placeholder="Type a name..." onChange={action('change')} />
+);
+
+export const withLabel = () => (
+  <TagsField
+    placeholder="Type a name..."
+    label="First names"
+    onChange={action('change')}
+  />
+);
+
+export const withForcedLabel = () => (
+  <TagsField
+    placeholder="Type a name..."
+    label="First names"
+    forceLabel={true}
+    onChange={action('change')}
+  />
+);
+
+export const autoFocused = () => (
+  <TagsField autoFocus onChange={action('change')} />
+);
+
+export const withValue = () => (
+  <TagsField value={['test']} onChange={action('change')} />
+);
+
+export const disabled = () => (
+  <TagsField disabled value={['test']} />
+);
+
+export const withSearch = () => (
+  <TagsField
+    search={val => search.filter(o => (new RegExp(val, 'ig')).test(o.title))}
+    placeholder="Type a name..."
+    label="First names"
+    onChange={action('change')}
+    parseTitle={o => o?.title || o}
+    onlyAllowSearchResults
+  />
+);
+
+export const withSearchAndOptions = () => (
+  <TagsField
+    search={val => search.filter(o => (new RegExp(val, 'ig')).test(o.title))}
+    placeholder="Type a name..."
+    label="First names"
+    onChange={action('change')}
+    parseTitle={o => o?.title || o}
+    onlyAllowSearchResults
+    options={options}
+  />
+);
+
+export const withValidation = () => (
+  <TagsField
+    validateTag={tag => parseInt(tag) > 1000}
+    validateInput={val => parseInt(val) > 0}
+    onChange={action('change')}
+  />
+);
diff --git a/packages/junipero/lib/TagsField/index.styl b/packages/junipero/lib/TagsField/index.styl
new file mode 100644
index 000000000..7d8446806
--- /dev/null
+++ b/packages/junipero/lib/TagsField/index.styl
@@ -0,0 +1,159 @@
+@require "../theme/colors"
+
+.junipero.tags-input
+  display: inline-block
+  position: relative
+  min-width: 250px
+  width: auto
+
+  &.focused
+    .wrapper
+      box-shadow: 0 0 0 2px rgba($color-eastern-blue, .5)
+
+  &.disabled
+    opacity: .5
+    pointer-events: none
+    user-select: none
+
+  .no-items, .no-results
+    padding: 10px
+    color: $color-shuttle-gray
+    text-align: center
+
+  .wrapper
+    padding: 5px 9px 0
+    border-radius: 2px
+    background: $color-black-squeeze
+    border: none
+    outline: none
+    font-size: 16px
+    width: 100%
+    transition: box-shadow .1s ease-in-out
+    display: flex
+    align-items: center
+    justify-content: flex-start
+    flex-wrap: wrap
+    overflow: auto
+    position: relative
+    cursor: text
+
+    .tag, .input
+      flex: 0 0 auto
+      display: block
+      margin-bottom: 5px
+
+    .tag
+      padding: 2px 8px
+      border-radius: 4px
+      background: $color-eastern-blue
+      color: $color-white
+      margin-right: 5px
+      font-size: 14px
+      cursor: pointer
+
+      &.active:not(.invalid), &:focus:not(.invalid)
+        background: $color-persian-green
+
+      &.invalid
+        background: $color-monza
+
+      a.remove
+        display: inline-block
+        width: 10px
+        height: 10px
+        cursor: pointer
+        margin-left: 4px
+        position: relative
+        vertical-align: middle
+        top: -1px
+
+        &:before, &:after
+          content: ''
+          height: 100%
+          position: absolute
+          width: 2px
+          background: $color-white
+          left: calc(50% - 1px)
+          top: 0
+
+        &:before
+          transform: rotate(45deg)
+
+        &:after
+          transform: rotate(-45deg)
+
+    .input
+      position: relative
+
+      input
+        padding: 2px 0
+        display: block
+        background: none
+        border: none
+        font-size: 16px
+
+    .placeholder,
+    .label
+      position: absolute
+      pointer-events: none
+      user-select: none
+      transform-origin: 0 0
+
+    .placeholder
+      left: 0
+      top: 50%
+      transform: translateY(-50%)
+      color: $color-shuttle-gray
+
+    .label
+      top: 4px
+      left: 9px
+      opacity: 0
+      transform: translateY(5px) scale(0.7)
+      transition-property: opacity, transform
+      transition-duration: .1s
+      transition-timing-function: ease-out
+      color: $color-eastern-blue
+
+  &:not(.empty),
+  &.label-enforced
+    .label
+      transform: translateY(0) scale(0.7)
+      opacity: 1
+
+    &:not(.labeled)
+      .label
+        display: none
+
+  &.labeled
+    .wrapper
+      padding: 11px 9px 6px
+
+    &:not(.empty),
+    &.label-enforced
+      .wrapper
+        padding: 21px 9px 0
+
+        input
+          padding: 0
+
+  &.with-search
+    .dropdown
+      display: block
+
+    .dropdown-toggle
+      height: 0
+      background: #000
+      display: block
+
+  &.invalid.dirty
+    .wrapper
+      background: $color-lavender-blush
+
+    &.focused
+      .wrapper
+        box-shadow: 0 0 0 2px rgba($color-monza, .5)
+
+    .placeholder,
+    .label
+      color: $color-monza
diff --git a/packages/junipero/lib/index.styl b/packages/junipero/lib/index.styl
index 9f09bfecc..ad3ce22f8 100644
--- a/packages/junipero/lib/index.styl
+++ b/packages/junipero/lib/index.styl
@@ -14,6 +14,7 @@
 @import "./SelectField"
 @import "./SliderField"
 @import "./Tabs"
+@import "./TagsField"
 @import "./TextField"
 
 .junipero