diff --git a/packages/docs-app/src/examples/select-examples/films.tsx b/packages/docs-app/src/examples/select-examples/films.tsx
index a92fd3dafc..8d61095cbe 100644
--- a/packages/docs-app/src/examples/select-examples/films.tsx
+++ b/packages/docs-app/src/examples/select-examples/films.tsx
@@ -182,3 +182,11 @@ export const filmSelectProps = {
     itemRenderer: renderFilm,
     items: TOP_100_FILMS,
 };
+
+export function createFilm(title: string): IFilm {
+    return {
+        rank: 100 + Math.floor(Math.random() * 100 + 1),
+        title,
+        year: new Date().getFullYear(),
+    };
+}
diff --git a/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx b/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx
index 54e45770a9..57c746b915 100644
--- a/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx
+++ b/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx
@@ -9,7 +9,7 @@ import * as React from "react";
 import { Button, H5, Intent, ITagProps, MenuItem, Switch } from "@blueprintjs/core";
 import { Example, IExampleProps } from "@blueprintjs/docs-theme";
 import { ItemRenderer, MultiSelect } from "@blueprintjs/select";
-import { filmSelectProps, IFilm, TOP_100_FILMS } from "./films";
+import { createFilm, filmSelectProps, IFilm, TOP_100_FILMS } from "./films";
 
 const FilmMultiSelect = MultiSelect.ofType<IFilm>();
 
@@ -19,6 +19,7 @@ export interface IMultiSelectExampleState {
     films: IFilm[];
     hasInitialContent: boolean;
     intent: boolean;
+    allowCreate: boolean;
     openOnKeyDown: boolean;
     popoverMinimal: boolean;
     resetOnSelect: boolean;
@@ -27,6 +28,7 @@ export interface IMultiSelectExampleState {
 
 export class MultiSelectExample extends React.PureComponent<IExampleProps, IMultiSelectExampleState> {
     public state: IMultiSelectExampleState = {
+        allowCreate: false,
         films: [],
         hasInitialContent: false,
         intent: false,
@@ -42,6 +44,7 @@ export class MultiSelectExample extends React.PureComponent<IExampleProps, IMult
     private handleTagMinimalChange = this.handleSwitchChange("tagMinimal");
     private handleIntentChange = this.handleSwitchChange("intent");
     private handleInitialContentChange = this.handleSwitchChange("hasInitialContent");
+    private handleAllowCreateChange = this.handleSwitchChange("allowCreate");
 
     public render() {
         const { films, hasInitialContent, tagMinimal, popoverMinimal, ...flags } = this.state;
@@ -56,6 +59,8 @@ export class MultiSelectExample extends React.PureComponent<IExampleProps, IMult
             // explicit undefined (not null) for default behavior (show full list)
             undefined
         );
+        const maybeCreateNewItemFromQuery = this.state.allowCreate ? createFilm : undefined;
+        const maybeCreateNewItemRenderer = this.state.allowCreate ? this.renderCreateFilmOption : null;
 
         const clearButton = films.length > 0 ? <Button icon="cross" minimal={true} onClick={this.handleClear} /> : null;
 
@@ -72,6 +77,8 @@ export class MultiSelectExample extends React.PureComponent<IExampleProps, IMult
                     tagRenderer={this.renderTag}
                     tagInputProps={{ tagProps: getTagProps, onRemove: this.handleTagRemove, rightElement: clearButton }}
                     selectedItems={this.state.films}
+                    createNewItemFromQuery={maybeCreateNewItemFromQuery}
+                    createNewItemRenderer={maybeCreateNewItemRenderer}
                 />
             </Example>
         );
@@ -96,6 +103,11 @@ export class MultiSelectExample extends React.PureComponent<IExampleProps, IMult
                     checked={this.state.hasInitialContent}
                     onChange={this.handleInitialContentChange}
                 />
+                <Switch
+                    label="Allow creating new films"
+                    checked={this.state.allowCreate}
+                    onChange={this.handleAllowCreateChange}
+                />
                 <H5>Tag props</H5>
                 <Switch
                     label="Minimal tag style"
@@ -137,6 +149,20 @@ export class MultiSelectExample extends React.PureComponent<IExampleProps, IMult
         );
     };
 
+    private renderCreateFilmOption = (
+        query: string,
+        active: boolean,
+        handleClick: React.MouseEventHandler<HTMLElement>,
+    ) => (
+        <MenuItem
+            icon="add"
+            text={`Create "${query}"`}
+            active={active}
+            onClick={handleClick}
+            shouldDismissPopover={false}
+        />
+    );
+
     private handleTagRemove = (_tag: string, index: number) => {
         this.deselectFilm(index);
     };
diff --git a/packages/docs-app/src/examples/select-examples/selectExample.tsx b/packages/docs-app/src/examples/select-examples/selectExample.tsx
index 352723b0f4..51f121f642 100644
--- a/packages/docs-app/src/examples/select-examples/selectExample.tsx
+++ b/packages/docs-app/src/examples/select-examples/selectExample.tsx
@@ -9,11 +9,12 @@ import * as React from "react";
 import { Button, H5, MenuItem, Switch } from "@blueprintjs/core";
 import { Example, IExampleProps } from "@blueprintjs/docs-theme";
 import { Select } from "@blueprintjs/select";
-import { filmSelectProps, IFilm, TOP_100_FILMS } from "./films";
+import { createFilm, filmSelectProps, IFilm, TOP_100_FILMS } from "./films";
 
 const FilmSelect = Select.ofType<IFilm>();
 
 export interface ISelectExampleState {
+    allowCreate: boolean;
     film: IFilm;
     filterable: boolean;
     hasInitialContent: boolean;
@@ -27,6 +28,7 @@ export interface ISelectExampleState {
 
 export class SelectExample extends React.PureComponent<IExampleProps, ISelectExampleState> {
     public state: ISelectExampleState = {
+        allowCreate: false,
         disableItems: false,
         disabled: false,
         film: TOP_100_FILMS[0],
@@ -38,6 +40,7 @@ export class SelectExample extends React.PureComponent<IExampleProps, ISelectExa
         resetOnSelect: false,
     };
 
+    private handleAllowCreateChange = this.handleSwitchChange("allowCreate");
     private handleDisabledChange = this.handleSwitchChange("disabled");
     private handleFilterableChange = this.handleSwitchChange("filterable");
     private handleInitialContentChange = this.handleSwitchChange("hasInitialContent");
@@ -55,12 +58,16 @@ export class SelectExample extends React.PureComponent<IExampleProps, ISelectExa
         ) : (
             undefined
         );
+        const maybeCreateNewItemFromQuery = this.state.allowCreate ? createFilm : undefined;
+        const maybeCreateNewItemRenderer = this.state.allowCreate ? this.renderCreateFilmOption : null;
 
         return (
             <Example options={this.renderOptions()} {...this.props}>
                 <FilmSelect
                     {...filmSelectProps}
                     {...flags}
+                    createNewItemFromQuery={maybeCreateNewItemFromQuery}
+                    createNewItemRenderer={maybeCreateNewItemRenderer}
                     disabled={disabled}
                     itemDisabled={this.isItemDisabled}
                     initialContent={initialContent}
@@ -110,6 +117,11 @@ export class SelectExample extends React.PureComponent<IExampleProps, ISelectExa
                     checked={this.state.disableItems}
                     onChange={this.handleItemDisabledChange}
                 />
+                <Switch
+                    label="Allow creating new items"
+                    checked={this.state.allowCreate}
+                    onChange={this.handleAllowCreateChange}
+                />
                 <H5>Popover props</H5>
                 <Switch
                     label="Minimal popover style"
@@ -120,6 +132,20 @@ export class SelectExample extends React.PureComponent<IExampleProps, ISelectExa
         );
     }
 
+    private renderCreateFilmOption = (
+        query: string,
+        active: boolean,
+        handleClick: React.MouseEventHandler<HTMLElement>,
+    ) => (
+        <MenuItem
+            icon="add"
+            text={`Create "${query}"`}
+            active={active}
+            onClick={handleClick}
+            shouldDismissPopover={false}
+        />
+    );
+
     private handleValueChange = (film: IFilm) => this.setState({ film });
 
     private handleSwitchChange(prop: keyof ISelectExampleState) {
diff --git a/packages/select/src/common/itemListRenderer.ts b/packages/select/src/common/itemListRenderer.ts
index 6ed9969cda..3bf9944408 100644
--- a/packages/select/src/common/itemListRenderer.ts
+++ b/packages/select/src/common/itemListRenderer.ts
@@ -4,6 +4,23 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+export enum QueryListActiveItemType {
+    CREATE = "create",
+    ITEM = "item",
+}
+
+export interface IQueryListActiveItem<T> {
+    type: QueryListActiveItemType;
+    item: T | null;
+}
+
+export function getActiveItem<T>(activeItem: IQueryListActiveItem<T> | null | undefined): T | null {
+    if (activeItem && activeItem.type === QueryListActiveItemType.ITEM) {
+        return activeItem.item;
+    }
+    return null;
+}
+
 /**
  * An object describing how to render the list of items.
  * An `itemListRenderer` receives this object as its sole argument.
@@ -13,7 +30,7 @@ export interface IItemListRendererProps<T> {
      * The currently focused item (for keyboard interactions), or `null` to
      * indicate that no item is active.
      */
-    activeItem: T | null;
+    activeItem: IQueryListActiveItem<T> | null;
 
     /**
      * Array of items filtered by `itemListPredicate` or `itemPredicate`.
diff --git a/packages/select/src/common/listItemsProps.ts b/packages/select/src/common/listItemsProps.ts
index 7f6a9c33ea..0c562a717a 100644
--- a/packages/select/src/common/listItemsProps.ts
+++ b/packages/select/src/common/listItemsProps.ts
@@ -5,7 +5,7 @@
 */
 
 import { IProps, Utils } from "@blueprintjs/core";
-import { ItemListRenderer } from "./itemListRenderer";
+import { IQueryListActiveItem, ItemListRenderer } from "./itemListRenderer";
 import { ItemRenderer } from "./itemRenderer";
 import { ItemListPredicate, ItemPredicate } from "./predicate";
 
@@ -28,7 +28,7 @@ export interface IListItemsProps<T> extends IProps {
      * uncontrolled (managed by the component's state). Use `onActiveItemChange`
      * to listen for updates.
      */
-    activeItem?: T | null;
+    activeItem?: IQueryListActiveItem<T> | null;
 
     /** Array of items in the list. */
     items: T[];
@@ -111,7 +111,7 @@ export interface IListItemsProps<T> extends IProps {
      * in the list, selecting an item makes it active, and changing the query may reset it to
      * the first item in the list if it no longer matches the filter.
      */
-    onActiveItemChange?: (activeItem: T | null) => void;
+    onActiveItemChange?: (activeItem: IQueryListActiveItem<T> | null) => void;
 
     /**
      * Callback invoked when an item from the list is selected,
@@ -124,6 +124,22 @@ export interface IListItemsProps<T> extends IProps {
      */
     onQueryChange?: (query: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
 
+    /**
+     * If provided, allows new items to be created with the current query string.
+     * This is invoked when user interaction causes a new item to be created, either by pressing the `enter` key or
+     * by clicking on the "Create Item" option. It transforms a query string into an item type.
+     */
+    createNewItemFromQuery?: (query: string) => T;
+
+    /**
+     * Custom renderer to transform the current query string into a selectable "Create Item" option.
+     */
+    createNewItemRenderer?: (
+        query: string,
+        active: boolean,
+        handleClick: React.MouseEventHandler<HTMLElement>,
+    ) => JSX.Element | undefined;
+
     /**
      * Whether the active item should be reset to the first matching item _every
      * time the query changes_ (via prop or by user input).
diff --git a/packages/select/src/components/query-list/queryList.tsx b/packages/select/src/components/query-list/queryList.tsx
index a14077e0b6..80079a0711 100644
--- a/packages/select/src/components/query-list/queryList.tsx
+++ b/packages/select/src/components/query-list/queryList.tsx
@@ -9,9 +9,12 @@ import * as React from "react";
 import { DISPLAYNAME_PREFIX, IProps, Keys, Menu, Utils } from "@blueprintjs/core";
 import {
     executeItemsEqual,
+    getActiveItem,
     IItemListRendererProps,
     IItemModifiers,
     IListItemsProps,
+    IQueryListActiveItem,
+    QueryListActiveItemType,
     renderFilteredItems,
 } from "../../common";
 
@@ -72,7 +75,7 @@ export interface IQueryListRendererProps<T> extends IQueryListState<T>, IProps {
 
 export interface IQueryListState<T> {
     /** The currently focused item (for keyboard interactions). */
-    activeItem: T | null;
+    activeItem: IQueryListActiveItem<T> | null;
 
     /** The original `items` array filtered by `itemListPredicate` or `itemPredicate`. */
     filteredItems: T[];
@@ -109,7 +112,7 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
      * or key interactions). When scrollToActiveItem = false, used to detect if
      * an unexpected external change to the active item has been made.
      */
-    private expectedNextActiveItem: T | null = null;
+    private expectedNextActiveItem: IQueryListActiveItem<T> | null = null;
 
     public constructor(props: IQueryListProps<T>, context?: any) {
         super(props, context);
@@ -175,8 +178,8 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
         const scrollToActiveItem = this.props.scrollToActiveItem !== false;
         const externalChangeToActiveItem = !executeItemsEqual(
             this.props.itemsEqual,
-            this.expectedNextActiveItem,
-            this.props.activeItem,
+            getActiveItem(this.expectedNextActiveItem),
+            getActiveItem(this.props.activeItem),
         );
         this.expectedNextActiveItem = null;
 
@@ -224,9 +227,7 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
         const shouldUpdateActiveItem =
             resetActiveItem ||
             activeIndex < 0 ||
-            // non-null assertion is safe because activeItem exists and was found in filteredItems
-            // (guaranteed because activeIndex >=0 here)
-            isItemDisabled(this.state.activeItem!, activeIndex, props.itemDisabled);
+            isItemDisabled(getActiveItem(this.state.activeItem), activeIndex, props.itemDisabled);
 
         if (hasQueryChanged && shouldUpdateActiveItem) {
             this.setActiveItem(getFirstEnabledItem(filteredItems, props.itemDisabled));
@@ -236,8 +237,17 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
     /** default `itemListRenderer` implementation */
     private renderItemList = (listProps: IItemListRendererProps<T>) => {
         const { initialContent, noResults } = this.props;
-        const menuContent = renderFilteredItems(listProps, noResults, initialContent);
-        return <Menu ulRef={listProps.itemsParentRef}>{menuContent}</Menu>;
+
+        // omit noResults if createNewItemFromQuery and createNewItemRenderer are both supplied, and query is not empty
+        const maybeNoResults = this.isCreateItemRendered() ? null : noResults;
+        const menuContent = renderFilteredItems(listProps, maybeNoResults, initialContent);
+        const createItemView = this.isCreateItemRendered() ? this.renderCreateItemMenuItem(this.state.query) : null;
+        return (
+            <Menu ulRef={listProps.itemsParentRef}>
+                {menuContent}
+                {createItemView}
+            </Menu>
+        );
     };
 
     /** wrapper around `itemRenderer` to inject props */
@@ -245,7 +255,7 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
         const { activeItem, query } = this.state;
         const matchesPredicate = this.state.filteredItems.indexOf(item) >= 0;
         const modifiers: IItemModifiers = {
-            active: executeItemsEqual(this.props.itemsEqual, activeItem, item),
+            active: executeItemsEqual(this.props.itemsEqual, getActiveItem(activeItem), item),
             disabled: isItemDisabled(item, index, this.props.itemDisabled),
             matchesPredicate,
         };
@@ -257,18 +267,39 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
         });
     };
 
+    private renderCreateItemMenuItem = (query: string) => {
+        const handleClick: React.MouseEventHandler<HTMLElement> = evt => {
+            this.handleItemCreate(query, evt);
+        };
+        return Utils.safeInvoke(
+            this.props.createNewItemRenderer,
+            query,
+            this.state.activeItem ? this.state.activeItem.type === QueryListActiveItemType.CREATE : false,
+            handleClick,
+        );
+    };
+
     private getActiveElement() {
         if (this.itemsParentRef != null) {
-            return this.itemsParentRef.children.item(this.getActiveIndex()) as HTMLElement;
+            if (this.state.activeItem && this.state.activeItem.type === QueryListActiveItemType.CREATE) {
+                // "Create" is active
+                return this.itemsParentRef.children.item(this.state.filteredItems.length) as HTMLElement;
+            } else {
+                const activeIndex = this.getActiveIndex();
+                return this.itemsParentRef.children.item(activeIndex) as HTMLElement;
+            }
         }
         return undefined;
     }
 
     private getActiveIndex(items = this.state.filteredItems) {
         const { activeItem } = this.state;
+        if (activeItem == null || activeItem.type === QueryListActiveItemType.CREATE || activeItem.item == null) {
+            return -1;
+        }
         // NOTE: this operation is O(n) so it should be avoided in render(). safe for events though.
         for (let i = 0; i < items.length; ++i) {
-            if (executeItemsEqual(this.props.itemsEqual, items[i], activeItem)) {
+            if (executeItemsEqual(this.props.itemsEqual, items[i], activeItem.item)) {
                 return i;
             }
         }
@@ -284,8 +315,19 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
         };
     }
 
+    private handleItemCreate = (query: string, evt?: React.SyntheticEvent<HTMLElement>) => {
+        const item = Utils.safeInvoke(this.props.createNewItemFromQuery, query);
+        if (item != null) {
+            Utils.safeInvoke(this.props.onItemSelect, item, evt);
+            this.setQuery("", true);
+        }
+    };
+
     private handleItemSelect = (item: T, event?: React.SyntheticEvent<HTMLElement>) => {
-        this.setActiveItem(item);
+        this.setActiveItem({
+            item,
+            type: QueryListActiveItemType.ITEM,
+        });
         Utils.safeInvoke(this.props.onItemSelect, item, event);
         if (this.props.resetOnSelect) {
             this.setQuery("", true);
@@ -310,9 +352,13 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
         // using keyup for enter to play nice with Button's keyboard clicking.
         // if we were to process enter on keydown, then Button would click itself on keyup
         // and the popvoer would re-open out of our control :(.
-        if (event.keyCode === Keys.ENTER && activeItem != null) {
+        if (event.keyCode === Keys.ENTER) {
             event.preventDefault();
-            this.handleItemSelect(activeItem, event);
+            if (activeItem == null || activeItem.type === QueryListActiveItemType.CREATE || activeItem.item == null) {
+                this.handleItemCreate(this.state.query, event);
+            } else {
+                this.handleItemSelect(activeItem.item, event);
+            }
         }
         Utils.safeInvoke(onKeyUp, event);
     };
@@ -328,11 +374,22 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
      * index. A `null` return value means no suitable item was found.
      * @param direction amount to move in each iteration, typically +/-1
      */
-    private getNextActiveItem(direction: number, startIndex = this.getActiveIndex()): T | null {
+    private getNextActiveItem(direction: number, startIndex = this.getActiveIndex()): IQueryListActiveItem<T> | null {
+        if (this.isCreateItemRendered()) {
+            const reachedCreate =
+                (startIndex === 0 && direction === -1) ||
+                (startIndex === this.state.filteredItems.length - 1 && direction === 1);
+            if (reachedCreate) {
+                return {
+                    item: null,
+                    type: QueryListActiveItemType.CREATE,
+                };
+            }
+        }
         return getFirstEnabledItem(this.state.filteredItems, this.props.itemDisabled, direction, startIndex);
     }
 
-    private setActiveItem(activeItem: T | null) {
+    private setActiveItem(activeItem: IQueryListActiveItem<T> | null) {
         this.expectedNextActiveItem = activeItem;
         if (this.props.activeItem === undefined) {
             // indicate that the active item may need to be scrolled into view after update.
@@ -341,6 +398,10 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
         }
         Utils.safeInvoke(this.props.onActiveItemChange, activeItem);
     }
+
+    private isCreateItemRendered(): boolean {
+        return !!(this.props.createNewItemFromQuery && this.props.createNewItemRenderer && this.state.query !== "");
+    }
 }
 
 function pxToNumber(value: string | null) {
@@ -389,7 +450,7 @@ export function getFirstEnabledItem<T>(
     itemDisabled?: keyof T | ((item: T, index: number) => boolean),
     direction = 1,
     startIndex = items.length - 1,
-): T | null {
+): IQueryListActiveItem<T> | null {
     if (items.length === 0) {
         return null;
     }
@@ -400,7 +461,10 @@ export function getFirstEnabledItem<T>(
         // find first non-disabled item
         index = wrapNumber(index + direction, 0, maxIndex);
         if (!isItemDisabled(items[index], index, itemDisabled)) {
-            return items[index];
+            return {
+                item: items[index],
+                type: QueryListActiveItemType.ITEM,
+            };
         }
     } while (index !== startIndex);
     return null;
diff --git a/packages/select/src/components/select/multi-select.md b/packages/select/src/components/select/multi-select.md
index 9ad17ee706..68405835a0 100644
--- a/packages/select/src/components/select/multi-select.md
+++ b/packages/select/src/components/select/multi-select.md
@@ -4,7 +4,7 @@ Use `MultiSelect<T>` for choosing multiple items in a list. The component render
 
 <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
     <h4 class="@ns-heading">Generic components and custom filtering</h4>
-    For more information on controlled usage, generic components and custom filtering, visit the documentation for [`Select<T>`](#select/select-component).
+    For more information on controlled usage, generic components, creating new items, and custom filtering, visit the documentation for [`Select<T>`](#select/select-component).
 </div>
 
 @reactExample MultiSelectExample
diff --git a/packages/select/src/components/select/select-component.md b/packages/select/src/components/select/select-component.md
index 6896dcfe8c..c701d13308 100644
--- a/packages/select/src/components/select/select-component.md
+++ b/packages/select/src/components/select/select-component.md
@@ -82,6 +82,47 @@ This controlled usage allows you to implement all sorts of advanced behavior on
 top of the basic `Select` interactions, such as windowed filtering for large
 data sets.
 
+@## Creating new items
+
+Use the `createNewItemFromQuery` prop to allow `Select<T>` to create new items. `createNewItemFromQuery` specifies how to turn a
+user-entered query string into an item of type `<T>` that `Select` understands. You should also provide the `createNewItemRenderer`
+prop to render a custom `MenuItem` to indicate that users can create new items.
+
+```tsx
+function createFilm(title: string): IFilm {
+    return {
+        rank: /* ... */,
+        title,
+        year: /* ... */,
+    };
+}
+
+function renderCreateFilmOption(query: string, active: boolean, handleClick: React.MouseEventHandler<HTMLElement>) {
+    return (
+        <MenuItem
+            icon="add"
+            text={`Create "${query}"`}
+            active={active}
+            onClick={handleClick}
+            shouldDismissPopover={false}
+        />
+    )
+}
+
+ReactDOM.render(
+    <FilmSelect
+        items={Films.items}
+        itemPredicate={Films.itemPredicate}
+        itemRenderer={Films.itemRenderer}
+        noResults={<MenuItem disabled={true} text="No results." />}
+        createNewItemFromQuery={createFilm}
+        createNewItemRenderer={renderCreateFilmOption}
+        onItemSelect={...}
+    />,
+    document.querySelector("#root")
+);
+```
+
 @## JavaScript API
 
 @interface ISelectProps
diff --git a/packages/select/test/queryListTests.tsx b/packages/select/test/queryListTests.tsx
index bff202fe01..f6ab7049c9 100644
--- a/packages/select/test/queryListTests.tsx
+++ b/packages/select/test/queryListTests.tsx
@@ -9,9 +9,16 @@ import * as React from "react";
 import * as sinon from "sinon";
 
 // this is an awkward import across the monorepo, but we'd rather not introduce a cyclical dependency or create another package
-import { IQueryListProps } from "@blueprintjs/select";
+import { IQueryListProps, QueryListActiveItemType } from "@blueprintjs/select";
 import { IFilm, renderFilm, TOP_100_FILMS } from "../../docs-app/src/examples/select-examples/films";
-import { IQueryListRendererProps, IQueryListState, ItemListPredicate, ItemListRenderer, QueryList } from "../src/index";
+import {
+    getActiveItem,
+    IQueryListRendererProps,
+    IQueryListState,
+    ItemListPredicate,
+    ItemListRenderer,
+    QueryList,
+} from "../src/index";
 
 type FilmQueryListWrapper = ReactWrapper<IQueryListProps<IFilm>, IQueryListState<IFilm>>;
 
@@ -87,7 +94,14 @@ describe("<QueryList>", () => {
 
         it("ensure onActiveItemChange is not called with undefined and empty list", () => {
             const myItem = { title: "Toy Story 3", year: 2010, rank: 1 };
-            const filmQueryList = mount(<FilmQueryList {...testProps} items={[myItem]} activeItem={myItem} query="" />);
+            const filmQueryList = mount(
+                <FilmQueryList
+                    {...testProps}
+                    items={[myItem]}
+                    activeItem={{ type: QueryListActiveItemType.ITEM, item: myItem }}
+                    query=""
+                />,
+            );
             filmQueryList.setState({ query: "query" });
             filmQueryList.setState({ activeItem: undefined });
             assert.equal(testProps.onActiveItemChange.callCount, 0);
@@ -97,7 +111,10 @@ describe("<QueryList>", () => {
             const myItem = { title: "Toy Story 3", year: 2010, rank: 1 };
             const props: IQueryListProps<IFilm> = {
                 ...testProps,
-                activeItem: myItem,
+                activeItem: {
+                    item: myItem,
+                    type: QueryListActiveItemType.ITEM,
+                },
                 items: [myItem],
                 query: "",
             };
@@ -113,12 +130,14 @@ describe("<QueryList>", () => {
                 query: "abc",
             };
             const filmQueryList: FilmQueryListWrapper = mount(<FilmQueryList {...props} />);
-            assert.deepEqual(filmQueryList.state().activeItem, TOP_100_FILMS[0]);
+            assert.isNotNull(filmQueryList.state().activeItem);
+            assert.deepEqual(getActiveItem(filmQueryList.state().activeItem), TOP_100_FILMS[0]);
             filmQueryList.setProps({
                 items: [TOP_100_FILMS[1]],
                 query: "123",
             });
-            assert.deepEqual(filmQueryList.state().activeItem, TOP_100_FILMS[1]);
+            assert.isNotNull(filmQueryList.state().activeItem);
+            assert.deepEqual(getActiveItem(filmQueryList.state().activeItem), TOP_100_FILMS[1]);
         });
     });
 
@@ -132,17 +151,22 @@ describe("<QueryList>", () => {
                 query: "123",
             };
             const filmQueryList: FilmQueryListWrapper = mount(<FilmQueryList {...props} />);
-            assert(filmQueryList.state().activeItem === TOP_100_FILMS[11]);
+            assert.isNotNull(filmQueryList.state().activeItem);
+            assert(getActiveItem(filmQueryList.state().activeItem) === TOP_100_FILMS[11]);
         });
 
         it("initializes to controlled activeItem prop (non-null)", () => {
             const props: IQueryListProps<IFilm> = {
                 ...testProps,
                 // List is not filtered, and item at index 11 is explicitly chosen as activeItem
-                activeItem: TOP_100_FILMS[11],
+                activeItem: {
+                    item: TOP_100_FILMS[11],
+                    type: QueryListActiveItemType.ITEM,
+                },
             };
             const filmQueryList: FilmQueryListWrapper = mount(<FilmQueryList {...props} />);
-            assert(filmQueryList.state().activeItem === TOP_100_FILMS[11]);
+            assert.isNotNull(filmQueryList.state().activeItem);
+            assert(getActiveItem(filmQueryList.state().activeItem) === TOP_100_FILMS[11]);
         });
 
         it("initializes to controlled activeItem prop (null)", () => {
diff --git a/packages/select/test/renderFilteredItemsTests.tsx b/packages/select/test/renderFilteredItemsTests.tsx
index ca2b27fead..00d5a21cf8 100644
--- a/packages/select/test/renderFilteredItemsTests.tsx
+++ b/packages/select/test/renderFilteredItemsTests.tsx
@@ -7,11 +7,14 @@
 import { assert } from "chai";
 import React from "react";
 import sinon from "sinon";
-import { IItemListRendererProps, renderFilteredItems } from "../src";
+import { IItemListRendererProps, QueryListActiveItemType, renderFilteredItems } from "../src";
 
 describe("renderFilteredItems()", () => {
     const PROPS: IItemListRendererProps<string> = {
-        activeItem: "one",
+        activeItem: {
+            item: "one",
+            type: QueryListActiveItemType.ITEM,
+        },
         filteredItems: ["one"],
         items: ["one", "two", "three"],
         itemsParentRef: sinon.stub(),
diff --git a/packages/select/test/selectComponentSuite.tsx b/packages/select/test/selectComponentSuite.tsx
index ec6fc82abc..0143ca10e4 100644
--- a/packages/select/test/selectComponentSuite.tsx
+++ b/packages/select/test/selectComponentSuite.tsx
@@ -10,7 +10,7 @@ import { ReactWrapper } from "enzyme";
 import * as React from "react";
 import * as sinon from "sinon";
 import { filterFilm, IFilm, renderFilm, TOP_100_FILMS } from "../../docs-app/src/examples/select-examples/films";
-import { IListItemsProps } from "../src/index";
+import { IListItemsProps, IQueryListActiveItem, QueryListActiveItemType } from "../src/index";
 
 export function selectComponentSuite<P extends IListItemsProps<IFilm>, S>(
     render: (props: IListItemsProps<IFilm>) => ReactWrapper<P, S>,
@@ -61,7 +61,7 @@ export function selectComponentSuite<P extends IListItemsProps<IFilm>, S>(
                 .at(4)
                 .simulate("click");
             assert.strictEqual(testProps.onItemSelect.args[0][0].rank, 6, "onItemSelect");
-            assert.strictEqual(testProps.onActiveItemChange.args[0][0].rank, 6, "onActiveItemChange");
+            assert.strictEqual(testProps.onActiveItemChange.args[0][0].item.rank, 6, "onActiveItemChange");
         });
 
         it("clicking item resets state when resetOnSelect=true", () => {
@@ -69,7 +69,7 @@ export function selectComponentSuite<P extends IListItemsProps<IFilm>, S>(
             findItems(wrapper)
                 .at(3)
                 .simulate("click");
-            const ranks = testProps.onActiveItemChange.args.map(args => (args[0] as IFilm).rank);
+            const ranks = testProps.onActiveItemChange.args.map(args => (args[0].item as IFilm).rank);
             // clicking changes to 5, then resets to 1
             assert.deepEqual(ranks, [5, 1]);
             assert.strictEqual(testProps.onQueryChange.lastCall.args[0], "");
@@ -86,14 +86,14 @@ export function selectComponentSuite<P extends IListItemsProps<IFilm>, S>(
             const wrapper = render({ ...testProps, query: "19", resetOnQuery: true });
             // more specific query picks the first item.
             wrapper.setProps({ query: "199" });
-            assert.strictEqual(testProps.onActiveItemChange.lastCall.args[0].rank, 1);
+            assert.strictEqual(testProps.onActiveItemChange.lastCall.args[0].item.rank, 1);
         });
 
         it("querying resets active item if it does not match", () => {
             const wrapper = render({ ...testProps, query: "19", resetOnQuery: false });
             // a different query altogether invalidates the previous active item, so QL chooses the first.
             wrapper.setProps({ query: "Forrest" });
-            assert.strictEqual(testProps.onActiveItemChange.lastCall.args[0].title, "Forrest Gump");
+            assert.strictEqual(testProps.onActiveItemChange.lastCall.args[0].item.title, "Forrest Gump");
         });
     });
 
@@ -103,20 +103,100 @@ export function selectComponentSuite<P extends IListItemsProps<IFilm>, S>(
             findInput(wrapper)
                 .simulate("keydown", { keyCode: Keys.ARROW_DOWN })
                 .simulate("keydown", { keyCode: Keys.ARROW_DOWN });
-            assert.equal((testProps.onActiveItemChange.lastCall.args[0] as IFilm).rank, 3);
+            assert.equal((testProps.onActiveItemChange.lastCall.args[0].item as IFilm).rank, 3);
         });
 
         it("arrow up invokes onActiveItemChange with previous filtered item", () => {
             const wrapper = render(testProps);
             findInput(wrapper).simulate("keydown", { keyCode: Keys.ARROW_UP });
-            assert.equal((testProps.onActiveItemChange.lastCall.args[0] as IFilm).rank, 20);
+            assert.equal((testProps.onActiveItemChange.lastCall.args[0].item as IFilm).rank, 20);
         });
 
         it("enter invokes onItemSelect with active item", () => {
             const wrapper = render(testProps);
             findInput(wrapper).simulate("keyup", { keyCode: Keys.ENTER });
-            const activeItem = testProps.onActiveItemChange.lastCall.args[0];
+            const activeItem = testProps.onActiveItemChange.lastCall.args[0].item;
             assert.equal(testProps.onItemSelect.lastCall.args[0], activeItem);
         });
     });
+
+    describe("create", () => {
+        const testCreateProps = {
+            ...testProps,
+            createNewItemFromQuery: sinon.spy(),
+            createNewItemRenderer: () => <textarea />,
+            noResults: <address />,
+        };
+
+        it("doesn't render create item if input is empty", () => {
+            const wrapper = render({
+                ...testCreateProps,
+                query: "",
+            });
+            assert.lengthOf(wrapper.find(`textarea`), 0, "should not find createItem");
+        });
+
+        it("renders create item if input is not empty", () => {
+            const wrapper = render({
+                ...testCreateProps,
+                query: TOP_100_FILMS[0].title,
+            });
+            assert.lengthOf(wrapper.find("address"), 0, "should not find noResults");
+            assert.lengthOf(wrapper.find(`textarea`), 1, "should find createItem");
+        });
+
+        it("renders create item if filtering returns empty list", () => {
+            const wrapper = render({
+                ...testCreateProps,
+                query: "non-existent film name",
+            });
+            assert.lengthOf(wrapper.find("address"), 0, "should not find noResults");
+            assert.lengthOf(wrapper.find(`textarea`), 1, "should find createItem");
+        });
+
+        it("enter invokes createNewItemFromQuery", () => {
+            const wrapper = render({
+                ...testCreateProps,
+                query: "non-existent film name",
+            });
+            findInput(wrapper).simulate("keyup", { keyCode: Keys.ENTER });
+            assert.equal(testCreateProps.createNewItemFromQuery.args[0][0], "non-existent film name");
+        });
+
+        it("when create item is rendered, arrow down invokes onActiveItemChange with CREATE", () => {
+            const wrapper = render({
+                ...testCreateProps,
+                query: TOP_100_FILMS[0].title,
+            });
+            findInput(wrapper).simulate("keydown", { keyCode: Keys.ARROW_DOWN });
+            assert.equal(
+                (testProps.onActiveItemChange.lastCall.args[0] as IQueryListActiveItem<IFilm>).type,
+                QueryListActiveItemType.CREATE,
+            );
+            findInput(wrapper).simulate("keydown", { keyCode: Keys.ARROW_DOWN });
+            assert.equal(
+                (testProps.onActiveItemChange.lastCall.args[0] as IQueryListActiveItem<IFilm>).type,
+                QueryListActiveItemType.ITEM,
+            );
+            assert.equal((testProps.onActiveItemChange.lastCall.args[0].item as IFilm).rank, TOP_100_FILMS[0].rank);
+        });
+
+        it("when create item is rendered, arrow up invokes onActiveItemChange with CREATE", () => {
+            const wrapper = render({
+                ...testCreateProps,
+                query: TOP_100_FILMS[0].title,
+            });
+            findInput(wrapper).simulate("keydown", { keyCode: Keys.ARROW_UP });
+            assert.equal(
+                (testProps.onActiveItemChange.lastCall.args[0] as IQueryListActiveItem<IFilm>).type,
+                QueryListActiveItemType.CREATE,
+            );
+            findInput(wrapper).simulate("keydown", { keyCode: Keys.ARROW_UP });
+            assert.equal(
+                (testProps.onActiveItemChange.lastCall.args[0] as IQueryListActiveItem<IFilm>).type,
+                QueryListActiveItemType.ITEM,
+            );
+            assert.equal((testProps.onActiveItemChange.lastCall.args[0].item as IFilm).rank, TOP_100_FILMS[0].rank);
+        });
+    });
 }