diff --git a/packages/core/src/common/_mixins.scss b/packages/core/src/common/_mixins.scss
index 3460509a3f9..3af661f3bf4 100644
--- a/packages/core/src/common/_mixins.scss
+++ b/packages/core/src/common/_mixins.scss
@@ -80,9 +80,9 @@ $pt-dark-intent-text-colors: (
   word-wrap: normal;
 }
 
-@mixin focus-outline() {
+@mixin focus-outline($offset: 2px) {
   outline: rgba($blue3, 0.5) auto 2px;
-  outline-offset: 2px;
+  outline-offset: $offset;
   -moz-outline-radius: 6px;
 }
 
diff --git a/packages/core/src/common/keys.ts b/packages/core/src/common/keys.ts
index 625cc88527b..71ce5f11e66 100644
--- a/packages/core/src/common/keys.ts
+++ b/packages/core/src/common/keys.ts
@@ -5,6 +5,7 @@
  * and https://github.com/palantir/blueprint/blob/master/PATENTS
  */
 
+export const BACKSPACE = 8;
 export const TAB = 9;
 export const ENTER = 13;
 export const SHIFT = 16;
diff --git a/packages/core/src/components/button/abstractButton.tsx b/packages/core/src/components/button/abstractButton.tsx
index 8c2d9e85671..2dc67b09187 100644
--- a/packages/core/src/components/button/abstractButton.tsx
+++ b/packages/core/src/components/button/abstractButton.tsx
@@ -15,6 +15,13 @@ import { safeInvoke } from "../../common/utils";
 import { Spinner } from "../spinner/spinner";
 
 export interface IButtonProps extends IActionProps {
+    /**
+     * If set to `true`, the button will display in an active state.
+     * This is equivalent to setting `className="pt-active"`.
+     * @default false
+     */
+    active?: boolean;
+
     /** A ref handler that receives the native HTML element backing this component. */
     elementRef?: (ref: HTMLElement) => any;
 
@@ -28,13 +35,6 @@ export interface IButtonProps extends IActionProps {
      */
     loading?: boolean;
 
-    /**
-     * If set to `true`, the button will display in an active state.
-     * This is equivalent to setting `pt-active` via className.
-     * @default false
-     */
-    active?: boolean;
-
     /**
      * HTML `type` attribute of button. Common values are `"button"` and `"submit"`.
      * Note that this prop has no effect on `AnchorButton`; it only affects `Button`.
diff --git a/packages/core/src/components/tag/_common.scss b/packages/core/src/components/tag/_common.scss
index 51ea0544804..c3f6556c56d 100644
--- a/packages/core/src/components/tag/_common.scss
+++ b/packages/core/src/components/tag/_common.scss
@@ -36,6 +36,10 @@ $tag-padding-large: ($tag-height-large - $pt-icon-size-large) / 2 !default;
   &.pt-tag-removable {
     padding-right: $tag-height;
   }
+
+  &.pt-active {
+    @include focus-outline(0);
+  }
 }
 
 @mixin pt-tag-large() {
diff --git a/packages/core/src/components/tag/tag.tsx b/packages/core/src/components/tag/tag.tsx
index b5bc72bb8f3..7b248b05030 100644
--- a/packages/core/src/components/tag/tag.tsx
+++ b/packages/core/src/components/tag/tag.tsx
@@ -14,12 +14,19 @@ import { isFunction } from "../../common/utils";
 
 import * as Classes from "../../common/classes";
 
-export interface ITagProps extends IProps, IIntentProps, React.HTMLProps<HTMLSpanElement> {
+export interface ITagProps extends IProps, IIntentProps, React.HTMLAttributes<Tag> {
+    /**
+     * If set to `true`, the tag will display in an active state.
+     * This is equivalent to setting `className="pt-active"`.
+     * @default false
+     */
+    active?: boolean;
+
     /**
      * Click handler for remove button.
      * Button will only be rendered if this prop is defined.
      */
-    onRemove?: (e: React.MouseEvent<HTMLSpanElement>) => void;
+    onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 @PureRender
@@ -27,12 +34,14 @@ export class Tag extends React.Component<ITagProps, {}> {
     public static displayName = "Blueprint.Tag";
 
     public render() {
-        const { className, intent, onRemove } = this.props;
+        const { active, className, intent, onRemove } = this.props;
         const tagClasses = classNames(Classes.TAG, Classes.intentClass(intent), {
             [Classes.TAG_REMOVABLE]: onRemove != null,
+            [Classes.ACTIVE]: active,
         }, className);
-        const button =
-          isFunction(onRemove) ? <button type="button" className={Classes.TAG_REMOVE} onClick={onRemove} /> : undefined;
+        const button = isFunction(onRemove)
+            ? <button type="button" className={Classes.TAG_REMOVE} onClick={onRemove} />
+            : undefined;
 
         return (
             <span {...removeNonHTMLProps(this.props)} className={tagClasses}>
diff --git a/packages/labs/examples/index.ts b/packages/labs/examples/index.ts
index 10716dcba7c..0903e75c494 100644
--- a/packages/labs/examples/index.ts
+++ b/packages/labs/examples/index.ts
@@ -6,3 +6,4 @@
  */
 
 export * from "./selectExample";
+export * from "./tagInputExample";
diff --git a/packages/labs/examples/selectExample.tsx b/packages/labs/examples/selectExample.tsx
index feb1627733f..660c9644af9 100644
--- a/packages/labs/examples/selectExample.tsx
+++ b/packages/labs/examples/selectExample.tsx
@@ -72,7 +72,7 @@ export class SelectExample extends BaseExample<ISelectExampleState> {
                 />,
                 <Switch
                     key="minimal"
-                    label="Minimal style"
+                    label="Minimal popover style"
                     checked={this.state.minimal}
                     onChange={this.handleMinimalChange}
                 />,
diff --git a/packages/labs/examples/tagInputExample.tsx b/packages/labs/examples/tagInputExample.tsx
new file mode 100644
index 00000000000..f5b90b0a162
--- /dev/null
+++ b/packages/labs/examples/tagInputExample.tsx
@@ -0,0 +1,105 @@
+/*
+ * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+ * Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
+ * of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
+ * and https://github.com/palantir/blueprint/blob/master/PATENTS
+ */
+
+import * as classNames from "classnames";
+import * as React from "react";
+
+import { Classes, Intent, ITagProps, Switch } from "@blueprintjs/core";
+import { BaseExample, handleBooleanChange } from "@blueprintjs/docs";
+import { TagInput } from "../src/tag-input/tagInput";
+
+const INTENTS = [Intent.NONE, Intent.PRIMARY, Intent.SUCCESS, Intent.DANGER, Intent.WARNING];
+
+export interface ITagInputExampleState {
+    fill?: boolean;
+    intent?: boolean;
+    large?: boolean;
+    minimal?: boolean;
+    values?: string[];
+}
+
+export class TagInputExample extends BaseExample<ITagInputExampleState> {
+    public state: ITagInputExampleState = {
+        fill: false,
+        intent: false,
+        large: false,
+        minimal: false,
+        values: ["Albert", "Bartholomew", "Casper"],
+    };
+
+    private handleFillChange = handleBooleanChange((fill) => this.setState({ fill }));
+    private handleIntentChange = handleBooleanChange((intent) => this.setState({ intent }));
+    private handleLargeChange = handleBooleanChange((large) => this.setState({ large }));
+    private handleMinimalChange = handleBooleanChange((minimal) => this.setState({ minimal }));
+
+    protected renderExample() {
+        const { fill, large, values } = this.state;
+
+        const classes = classNames({
+            [Classes.FILL]: fill,
+            [Classes.LARGE]: large,
+        });
+
+        // define a new function every time so switch changes will cause it to re-render
+        // NOTE: avoid this pattern in your app (use this.getTagProps instead); this is only for
+        // example purposes!!
+        const getTagProps = (_v: string, index: number): ITagProps => ({
+            className: this.state.minimal ? Classes.MINIMAL : "",
+            intent: this.state.intent ? INTENTS[index % INTENTS.length] : Intent.NONE,
+        });
+
+        return (
+            <TagInput
+                className={classes}
+                onAdd={this.handleAdd}
+                onRemove={this.handleRemove}
+                tagProps={getTagProps}
+                values={values}
+            />
+        );
+    }
+
+    protected renderOptions() {
+        return [
+            [
+                <Switch
+                    checked={this.state.fill}
+                    label="Fill container width"
+                    key="fill"
+                    onChange={this.handleFillChange}
+                />,
+                <Switch
+                    checked={this.state.large}
+                    label="Large"
+                    key="large"
+                    onChange={this.handleLargeChange}
+                />,
+            ], [
+                <label key="heading" className={Classes.LABEL}>Tag props</label>,
+                <Switch
+                    checked={this.state.minimal}
+                    label="Use minimal tags"
+                    key="minimal"
+                    onChange={this.handleMinimalChange}
+                />,
+                <Switch
+                    checked={this.state.intent}
+                    label="Cycle through intents"
+                    key="intent"
+                    onChange={this.handleIntentChange}
+                />,
+            ],
+        ];
+    }
+
+    private handleAdd = (newValue: string) => {
+        this.setState({ values: [...this.state.values, newValue] });
+    }
+    private handleRemove = (_removedValue: string, removedIndex: number) => {
+        this.setState({ values: this.state.values.filter((_, i) => i !== removedIndex) });
+    }
+}
diff --git a/packages/labs/src/blueprint-labs.scss b/packages/labs/src/blueprint-labs.scss
index 1c54db518ad..a314627d83e 100644
--- a/packages/labs/src/blueprint-labs.scss
+++ b/packages/labs/src/blueprint-labs.scss
@@ -5,4 +5,5 @@
  * and https://github.com/palantir/blueprint/blob/master/PATENTS
  */
 
-@import "select/select";
+@import "./select/select";
+@import "./tag-input/tag-input";
diff --git a/packages/labs/src/index.ts b/packages/labs/src/index.ts
index 784a2a4a500..61e871a50d7 100644
--- a/packages/labs/src/index.ts
+++ b/packages/labs/src/index.ts
@@ -7,3 +7,4 @@
 
 export * from "./query-list/queryList";
 export * from "./select/select";
+export * from "./tag-input/tagInput";
diff --git a/packages/labs/src/labs.md b/packages/labs/src/labs.md
index 06fd49608b5..cbe20461538 100644
--- a/packages/labs/src/labs.md
+++ b/packages/labs/src/labs.md
@@ -108,3 +108,25 @@ An object with the following properties will be passed to an `QueryList` `render
 This interface is generic, accepting a type parameter `<T>` for an item in the list.
 
 @interface IQueryListRendererProps
+
+@## TagInput
+
+`TagInput` renders [`Tag`](#core/components/tag)s inside an input, followed by an actual text input. The container is merely styled to look like a Blueprint input; the actual editable element appears after the last tag. Clicking anywhere on the container will focus the text input for seamless interaction.
+
+
+@reactExample TagInputExample
+
+`TagInput` must be controlled, meaning the `values` prop is required and event handlers are strongly suggested. The component controls the text input internally to support the `onAdd` event, but you can wrest control by supplying your own `inputProps`.
+
+`Tag` appearance can be customized with `tagProps`: supply an object to apply the same props to every tag, or supply a callback to apply dynamic props per tag. Tag `values` must be an array of strings so you may need a transformation step between your state and these props.
+
+Tags can be removed by clicking their X buttons, or by pressing <kbd class="pt-key">backspace</kbd> repeatedly.
+Arrow keys can also be used to focus on a particular tag before removing it. The cursor must be at the beginning
+of the text input for these interactions.
+
+<div class="pt-callout pt-intent-primary pt-icon-info-sign">
+    <h5>Handling long words</h5>
+    Set an explicit `width` on `.pt-tag-input` to cause long words to wrap onto multiple lines. Either supply a specific pixel value, or use `<TagInput className="pt-fill">` to fill its container's width (try this in the example above).
+</div>
+
+@interface ITagInputProps
diff --git a/packages/labs/src/tag-input/tag-input.scss b/packages/labs/src/tag-input/tag-input.scss
new file mode 100644
index 00000000000..3a7fc2383ba
--- /dev/null
+++ b/packages/labs/src/tag-input/tag-input.scss
@@ -0,0 +1,64 @@
+/*
+ * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+ * Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
+ * of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
+ * and https://github.com/palantir/blueprint/blob/master/PATENTS
+ */
+
+@import "~@blueprintjs/core/src/common/variables";
+@import "~@blueprintjs/core/src/components/forms/common";
+@import "~@blueprintjs/core/src/components/tag/common";
+
+$input-padding: ($pt-input-height - $tag-height) / 2;
+
+.pt-tag-input {
+  display: flex;
+  flex-wrap: wrap;
+  cursor: text;
+  height: auto;
+  padding: $input-padding 0 0 $input-padding;
+
+  .pt-tag {
+    margin: 0 $input-padding $input-padding 0;
+    // NOTE: in order to wrap long words, you must set explicit width on TagInput,
+    // or use .pt-fill CSS class modifier.
+    overflow-wrap: break-word;
+  }
+
+  .pt-input-ghost {
+    // input fills remaining line
+    flex: 1 1 auto;
+    margin-bottom: $input-padding;
+    // essentially a min-width, cuz flex allows it to grow or shrink:
+    width: $pt-grid-size * 10;
+    line-height: $tag-height;
+  }
+
+  &.pt-large {
+    height: auto;
+
+    .pt-input-ghost {
+      line-height: $tag-height-large;
+    }
+  }
+
+  &.pt-active {
+    box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
+    background-color: $input-background-color;
+  }
+}
+
+// TODO: this is probably a useful modifier that we should pull into core, and use in EditableText
+.pt-input-ghost {
+  // reset browser input styles (we're using an input solely because you can type in it)
+  border: none;
+  box-shadow: none;
+  background: none;
+  padding: 0;
+
+  &:focus {
+    // remove focus state too
+    // stylelint-disable-next-line declaration-no-important
+    outline: none !important;
+  }
+}
diff --git a/packages/labs/src/tag-input/tagInput.tsx b/packages/labs/src/tag-input/tagInput.tsx
new file mode 100644
index 00000000000..6a1f2ebb2c9
--- /dev/null
+++ b/packages/labs/src/tag-input/tagInput.tsx
@@ -0,0 +1,204 @@
+/*
+ * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+ * Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
+ * of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
+ * and https://github.com/palantir/blueprint/blob/master/PATENTS
+ */
+
+import * as classNames from "classnames";
+import * as PureRender from "pure-render-decorator";
+import * as React from "react";
+
+import { AbstractComponent, Classes, HTMLInputProps, IProps, ITagProps, Keys, Tag, Utils } from "@blueprintjs/core";
+
+export interface ITagInputProps extends IProps {
+    /** React props to pass to the `<input>` element */
+    inputProps?: HTMLInputProps;
+
+    /**
+     * Callback invoked when a new tag is added by the user pressing `enter` on the input.
+     * Receives the current value of the input field. New tags are expected to be appended to
+     * the list.
+     */
+    onAdd?: (value: string) => void;
+
+    /**
+     * Callback invoked when the user clicks the X button on a tag.
+     * Receives value and index of removed tag.
+     */
+    onRemove?: (value: string, index: number) => void;
+
+    /**
+     * React props to pass to each `Tag`. Provide an object to pass the same props to every tag,
+     * or a function to customize props per tag.
+     *
+     * If you define `onRemove` here then you will have to implement your own tag removal
+     * handling as `TagInput`'s own `onRemove` handler will never be invoked.
+     */
+    tagProps?: ITagProps | ((value: string, index: number) => ITagProps);
+
+    /** Controlled tag values. */
+    values: string[];
+}
+
+export interface ITagInputState {
+    activeIndex?: number;
+    inputValue?: string;
+    isInputFocused?: boolean;
+}
+
+/** special value for absence of active tag */
+const NONE = -1;
+
+@PureRender
+export class TagInput extends AbstractComponent<ITagInputProps, ITagInputState> {
+    public static displayName = "Blueprint.TagInput";
+
+    public static defaultProps: Partial<ITagInputProps> = {
+        inputProps: {},
+        tagProps: {},
+    };
+
+    public state: ITagInputState = {
+        activeIndex: NONE,
+        inputValue: "",
+        isInputFocused: false,
+    };
+
+    private inputElement: HTMLInputElement;
+    private refHandlers = {
+        input: (ref: HTMLInputElement) => {
+            this.inputElement = ref;
+            // can't use safeInvoke cuz inputProps.ref can be `string | function`
+            const refHandler = this.props.inputProps.ref;
+            if (Utils.isFunction(refHandler)) {
+                refHandler(ref);
+            }
+        },
+    };
+
+    public render() {
+        const { className, inputProps, values } = this.props;
+
+        const classes = classNames(Classes.INPUT, "pt-tag-input", {
+            [Classes.ACTIVE]: this.state.isInputFocused,
+        }, className);
+
+        return (
+            <div
+                className={classes}
+                onBlur={this.handleBlur}
+                onClick={this.handleContainerClick}
+            >
+                {values.map(this.renderTag)}
+                <input
+                    value={this.state.inputValue}
+                    {...inputProps}
+                    onFocus={this.handleInputFocus}
+                    onChange={this.handleInputChange}
+                    onKeyDown={this.handleInputKeyDown}
+                    ref={this.refHandlers.input}
+                    className={classNames("pt-input-ghost", inputProps.className)}
+                />
+            </div>
+        );
+    }
+
+    private renderTag = (tag: string, index: number) => {
+        const { tagProps } = this.props;
+        const props = Utils.isFunction(tagProps) ? tagProps(tag, index) : tagProps;
+        return (
+            <Tag
+                active={index === this.state.activeIndex}
+                data-tag-index={index}
+                key={tag + "__" + index}
+                onRemove={this.handleRemoveTag}
+                {...props}
+            >
+                {tag}
+            </Tag>
+        );
+    }
+
+    private getNextActiveIndex(direction: number) {
+        const { activeIndex } = this.state;
+        const totalItems = this.props.values.length;
+
+        if (activeIndex === NONE && direction < 0) {
+            // nothing active, moving left: select last
+            return totalItems - 1;
+        } else if (activeIndex === NONE && direction > 0) {
+            // nothing active, moving right: do nothing
+            return NONE;
+        } else {
+            // otherwise, move in direction and clamp to bounds.
+            // note that upper bound allows going one beyond last item
+            // so focus can move off the right end, into the text input.
+            return Utils.clamp(activeIndex + direction, 0, totalItems);
+        }
+    }
+
+    private handleContainerClick = () => {
+        if (this.inputElement != null) {
+            this.inputElement.focus();
+        }
+    }
+
+    private handleBlur = () => requestAnimationFrame(() => {
+        // this event is attached to the container element to capture all blur events from inside.
+        // we only need to "unfocus" if the blur event is leaving the container.
+        // defer this check using rAF so activeElement will have updated.
+        if (this.inputElement != null && !this.inputElement.parentElement.contains(document.activeElement)) {
+            this.setState({ activeIndex: NONE, isInputFocused: false });
+        }
+    })
+
+    private handleInputFocus = (event: React.FocusEvent<HTMLElement>) => {
+        this.setState({ isInputFocused: true });
+        Utils.safeInvoke(this.props.inputProps.onFocus, event);
+    }
+
+    private handleInputChange = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        this.setState({ activeIndex: NONE, inputValue: event.currentTarget.value });
+        Utils.safeInvoke(this.props.inputProps.onChange, event);
+    }
+
+    private handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        const { selectionEnd, value } = event.currentTarget;
+        if (event.which === Keys.ENTER && value.length > 0) {
+            // enter key on non-empty string invokes onAdd
+            this.setState({ inputValue: "" });
+            Utils.safeInvoke(this.props.onAdd, value);
+        } else if (selectionEnd === 0 && this.props.values.length > 0) {
+            // cursor at beginning of input allows interaction with tags.
+            // use selectionEnd to verify cursor position and no text selection.
+            if (event.which === Keys.ARROW_LEFT || event.which === Keys.ARROW_RIGHT) {
+                const nextIndex = this.getNextActiveIndex(event.which === Keys.ARROW_RIGHT ? 1 : -1);
+                if (nextIndex !== this.state.activeIndex) {
+                    event.preventDefault();
+                    this.setState({ activeIndex: nextIndex });
+                }
+            } else if (event.which === Keys.BACKSPACE) {
+                this.removeActiveIndex(event);
+            }
+        }
+        Utils.safeInvoke(this.props.inputProps.onKeyDown, event);
+    }
+
+    private handleRemoveTag = (event: React.MouseEvent<HTMLSpanElement>) => {
+        // using data attribute to simplify callback logic -- one handler for all children
+        const index = +event.currentTarget.parentElement.getAttribute("data-tag-index");
+        Utils.safeInvoke(this.props.onRemove, this.props.values[index], index);
+    }
+
+    private removeActiveIndex(event: React.KeyboardEvent<HTMLInputElement>) {
+        const previousActiveIndex = this.state.activeIndex;
+        // always move leftward one item (this will focus last item if nothing is focused)
+        this.setState({ activeIndex: this.getNextActiveIndex(-1) });
+        // delete item if there was a previous valid selection (ignore first backspace to focus last item)
+        if (previousActiveIndex !== NONE && previousActiveIndex < this.props.values.length) {
+            event.preventDefault();
+            Utils.safeInvoke(this.props.onRemove, this.props.values[previousActiveIndex], previousActiveIndex);
+        }
+    }
+}
diff --git a/packages/labs/test/index.ts b/packages/labs/test/index.ts
index c0277dc1865..2c3283f4afa 100644
--- a/packages/labs/test/index.ts
+++ b/packages/labs/test/index.ts
@@ -4,3 +4,4 @@
 
 import "./queryListTests";
 import "./selectTests";
+import "./tagInputTests";
diff --git a/packages/labs/test/tagInputTests.tsx b/packages/labs/test/tagInputTests.tsx
new file mode 100644
index 00000000000..d22cb366802
--- /dev/null
+++ b/packages/labs/test/tagInputTests.tsx
@@ -0,0 +1,136 @@
+/*
+ * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+ * Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
+ * of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
+ * and https://github.com/palantir/blueprint/blob/master/PATENTS
+ */
+
+import { assert } from "chai";
+import { mount, shallow } from "enzyme";
+import * as React from "react";
+
+import { Intent, Keys, Tag } from "@blueprintjs/core";
+import { TagInput } from "../src/index";
+
+describe("<TagInput>", () => {
+    const VALUES = ["one", "two", "three"];
+
+    it("passes inputProps to input element", () => {
+        const onBlur = sinon.spy();
+        const input = shallow(<TagInput values={VALUES} inputProps={{ autoFocus: true, onBlur }} />)
+            .find("input");
+        assert.isTrue(input.prop("autoFocus"));
+        // check that event handler is proxied
+        const fakeEvent = { flag: "yes" };
+        input.simulate("blur", fakeEvent);
+        assert.strictEqual(onBlur.args[0][0], fakeEvent);
+    });
+
+    it("renders a Tag for each value", () => {
+        const wrapper = mount(<TagInput values={VALUES} />);
+        assert.lengthOf(wrapper.find(Tag), VALUES.length);
+    });
+
+    it("tagProps object is applied to each Tag", () => {
+        const wrapper = mount(<TagInput tagProps={{ intent: Intent.PRIMARY }} values={VALUES} />);
+        const intents = wrapper.find(Tag).map((tag) => tag.prop("intent"));
+        assert.deepEqual(intents, [Intent.PRIMARY, Intent.PRIMARY, Intent.PRIMARY]);
+    });
+
+    it("tagProps function is invoked for each Tag", () => {
+        const tagProps = sinon.spy();
+        mount(<TagInput tagProps={tagProps} values={VALUES} />);
+        assert.isTrue(tagProps.calledThrice);
+    });
+
+    it("clicking Tag remove button invokes onRemove with that value", () => {
+        const onRemove = sinon.spy();
+        // requires full mount to support data attributes and parentElement
+        const wrapper = mount(<TagInput onRemove={onRemove} values={VALUES} />);
+        wrapper.find("button").at(1).simulate("click");
+        assert.isTrue(onRemove.calledOnce);
+        assert.sameMembers(onRemove.args[0], [VALUES[1], 1]);
+    });
+
+    describe("onAdd", () => {
+        it("is not invoked on enter when input is empty", () => {
+            const onAdd = sinon.spy();
+            const wrapper = shallow(<TagInput onAdd={onAdd} values={VALUES} />);
+            wrapper.find("input").simulate("keydown", {
+                currentTarget: { value: "" },
+                which: Keys.ENTER,
+            });
+            assert.isTrue(onAdd.notCalled);
+        });
+
+        it("is invoked on enter", () => {
+            const value = "new item";
+            const onAdd = sinon.spy();
+            const wrapper = shallow(<TagInput onAdd={onAdd} values={VALUES} />);
+            wrapper.find("input").simulate("keydown", {
+                currentTarget: { value },
+                which: Keys.ENTER,
+            });
+            assert.isTrue(onAdd.calledOnce);
+            assert.strictEqual(onAdd.args[0][0], value);
+        });
+    });
+
+    describe("onRemove", () => {
+        it("pressing backspace focuses last item", () => {
+            const onRemove = sinon.spy();
+            const wrapper = mount(<TagInput onRemove={onRemove} values={VALUES} />);
+            wrapper.find("input")
+                .simulate("keydown", { which: Keys.BACKSPACE });
+
+            assert.equal(wrapper.state("activeIndex"), VALUES.length - 1);
+            assert.isTrue(onRemove.notCalled);
+        });
+
+        it("pressing backspace again removes last item", () => {
+            const onRemove = sinon.spy();
+            const wrapper = mount(<TagInput onRemove={onRemove} values={VALUES} />);
+            wrapper.find("input")
+                .simulate("keydown", { which: Keys.BACKSPACE })
+                .simulate("keydown", { which: Keys.BACKSPACE });
+
+            assert.equal(wrapper.state("activeIndex"), VALUES.length - 2);
+            assert.isTrue(onRemove.calledOnce);
+            const lastIndex = VALUES.length - 1;
+            assert.sameMembers(onRemove.args[0], [VALUES[lastIndex], lastIndex]);
+        });
+
+        it("pressing left arrow key navigates active item and backspace removes it", () => {
+            const onRemove = sinon.spy();
+            const wrapper = mount(<TagInput onRemove={onRemove} values={VALUES} />);
+            // select and remove middle item
+            wrapper.find("input")
+                .simulate("keydown", { which: Keys.ARROW_LEFT })
+                .simulate("keydown", { which: Keys.ARROW_LEFT })
+                .simulate("keydown", { which: Keys.BACKSPACE });
+
+            assert.equal(wrapper.state("activeIndex"), 0);
+            assert.isTrue(onRemove.calledOnce);
+            assert.sameMembers(onRemove.args[0], [VALUES[1], 1]);
+        });
+
+        it("pressing right arrow key in initial state does nothing", () => {
+            const wrapper = mount(<TagInput values={VALUES} />);
+            wrapper.find("input")
+                .simulate("keydown", { which: Keys.ARROW_RIGHT });
+            assert.equal(wrapper.state("activeIndex"), -1);
+        });
+    });
+
+    describe("when input is not empty", () => {
+        it("pressing backspace does not remove item", () => {
+            const onRemove = sinon.spy();
+            const wrapper = shallow(<TagInput onRemove={onRemove} values={VALUES} />);
+            wrapper.find("input").simulate("keydown", {
+                currentTarget: { value: "text" },
+                which: Keys.BACKSPACE,
+            });
+            assert.isTrue(onRemove.notCalled);
+        });
+    });
+});