diff --git a/packages/docs-app/src/components/resources.tsx b/packages/docs-app/src/components/resources.tsx
index bd7b09d753..0ee6f284b1 100644
--- a/packages/docs-app/src/components/resources.tsx
+++ b/packages/docs-app/src/components/resources.tsx
@@ -18,11 +18,15 @@ const RESOURCES: IResourceProps[] = [
 export const Resources: React.SFC = () => (
     <>
         <div className="blueprint-resources">
-            {RESOURCES.map(resource => <ResourceCard key={resource.fileName} {...resource} />)}
+            {RESOURCES.map(resource => (
+                <ResourceCard key={resource.fileName} {...resource} />
+            ))}
         </div>
         <Callout title="Missing fonts?" intent="warning">
             Download Apple's San Francisco font directly from the source:{" "}
-            <a href="https://developer.apple.com/fonts/" target="_blank" rel="noopener noreferrer">https://developer.apple.com/fonts/</a>
+            <a href="https://developer.apple.com/fonts/" target="_blank" rel="noopener noreferrer">
+                https://developer.apple.com/fonts/
+            </a>
         </Callout>
     </>
 );
diff --git a/packages/docs-app/src/examples/select-examples/films.tsx b/packages/docs-app/src/examples/select-examples/films.tsx
index a92fd3dafc..04723365f2 100644
--- a/packages/docs-app/src/examples/select-examples/films.tsx
+++ b/packages/docs-app/src/examples/select-examples/films.tsx
@@ -138,6 +138,20 @@ export const renderFilm: ItemRenderer<IFilm> = (film, { handleClick, modifiers,
     );
 };
 
+export const renderCreateFilmOption = (
+    query: string,
+    active: boolean,
+    handleClick: React.MouseEventHandler<HTMLElement>,
+) => (
+    <MenuItem
+        icon="add"
+        text={`Create "${query}"`}
+        active={active}
+        onClick={handleClick}
+        shouldDismissPopover={false}
+    />
+);
+
 export const filterFilm: ItemPredicate<IFilm> = (query, film) => {
     return `${film.rank}. ${film.title.toLowerCase()} ${film.year}`.indexOf(query.toLowerCase()) >= 0;
 };
@@ -182,3 +196,55 @@ 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(),
+    };
+}
+
+export function areFilmsEqual(filmA: IFilm, filmB: IFilm) {
+    // Compare only the titles (ignoring case) just for simplicity.
+    return filmA.title.toLowerCase() === filmB.title.toLowerCase();
+}
+
+export function arrayContainsFilm(films: IFilm[], filmToFind: IFilm): boolean {
+    return films.some((film: IFilm) => film.title === filmToFind.title);
+}
+
+export function addFilmToArray(films: IFilm[], filmToAdd: IFilm) {
+    return [...films, filmToAdd];
+}
+
+export function deleteFilmFromArray(films: IFilm[], filmToDelete: IFilm) {
+    return films.filter(film => film !== filmToDelete);
+}
+
+export function maybeAddCreatedFilmToArrays(
+    items: IFilm[],
+    createdItems: IFilm[],
+    film: IFilm,
+): { createdItems: IFilm[]; items: IFilm[] } {
+    const isNewlyCreatedItem = !arrayContainsFilm(items, film);
+    return {
+        createdItems: isNewlyCreatedItem ? addFilmToArray(createdItems, film) : createdItems,
+        // Add a created film to `items` so that the film can be deselected.
+        items: isNewlyCreatedItem ? addFilmToArray(items, film) : items,
+    };
+}
+
+export function maybeDeleteCreatedFilmFromArrays(
+    items: IFilm[],
+    createdItems: IFilm[],
+    film: IFilm,
+): { createdItems: IFilm[]; items: IFilm[] } {
+    const wasItemCreatedByUser = arrayContainsFilm(createdItems, film);
+
+    // Delete the item if the user manually created it.
+    return {
+        createdItems: wasItemCreatedByUser ? deleteFilmFromArray(createdItems, film) : createdItems,
+        items: wasItemCreatedByUser ? deleteFilmFromArray(items, film) : items,
+    };
+}
diff --git a/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx b/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx
index 54e45770a9..8f138d3cb7 100644
--- a/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx
+++ b/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx
@@ -9,16 +9,29 @@ 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 {
+    areFilmsEqual,
+    arrayContainsFilm,
+    createFilm,
+    filmSelectProps,
+    IFilm,
+    maybeAddCreatedFilmToArrays,
+    maybeDeleteCreatedFilmFromArrays,
+    renderCreateFilmOption,
+    TOP_100_FILMS,
+} from "./films";
 
 const FilmMultiSelect = MultiSelect.ofType<IFilm>();
 
 const INTENTS = [Intent.NONE, Intent.PRIMARY, Intent.SUCCESS, Intent.DANGER, Intent.WARNING];
 
 export interface IMultiSelectExampleState {
+    allowCreate: boolean;
+    createdItems: IFilm[];
     films: IFilm[];
     hasInitialContent: boolean;
     intent: boolean;
+    items: IFilm[];
     openOnKeyDown: boolean;
     popoverMinimal: boolean;
     resetOnSelect: boolean;
@@ -27,15 +40,19 @@ export interface IMultiSelectExampleState {
 
 export class MultiSelectExample extends React.PureComponent<IExampleProps, IMultiSelectExampleState> {
     public state: IMultiSelectExampleState = {
+        allowCreate: false,
+        createdItems: [],
         films: [],
         hasInitialContent: false,
         intent: false,
+        items: filmSelectProps.items,
         openOnKeyDown: false,
         popoverMinimal: true,
         resetOnSelect: true,
         tagMinimal: false,
     };
 
+    private handleAllowCreateChange = this.handleSwitchChange("allowCreate");
     private handleKeyDownChange = this.handleSwitchChange("openOnKeyDown");
     private handleResetChange = this.handleSwitchChange("resetOnSelect");
     private handlePopoverMinimalChange = this.handleSwitchChange("popoverMinimal");
@@ -44,7 +61,7 @@ export class MultiSelectExample extends React.PureComponent<IExampleProps, IMult
     private handleInitialContentChange = this.handleSwitchChange("hasInitialContent");
 
     public render() {
-        const { films, hasInitialContent, tagMinimal, popoverMinimal, ...flags } = this.state;
+        const { allowCreate, films, hasInitialContent, tagMinimal, popoverMinimal, ...flags } = this.state;
         const getTagProps = (_value: string, index: number): ITagProps => ({
             intent: this.state.intent ? INTENTS[index % INTENTS.length] : Intent.NONE,
             minimal: tagMinimal,
@@ -56,6 +73,8 @@ export class MultiSelectExample extends React.PureComponent<IExampleProps, IMult
             // explicit undefined (not null) for default behavior (show full list)
             undefined
         );
+        const maybeCreateNewItemFromQuery = allowCreate ? createFilm : undefined;
+        const maybeCreateNewItemRenderer = allowCreate ? renderCreateFilmOption : null;
 
         const clearButton = films.length > 0 ? <Button icon="cross" minimal={true} onClick={this.handleClear} /> : null;
 
@@ -64,8 +83,14 @@ export class MultiSelectExample extends React.PureComponent<IExampleProps, IMult
                 <FilmMultiSelect
                     {...filmSelectProps}
                     {...flags}
+                    createNewItemFromQuery={maybeCreateNewItemFromQuery}
+                    createNewItemRenderer={maybeCreateNewItemRenderer}
                     initialContent={initialContent}
                     itemRenderer={this.renderFilm}
+                    itemsEqual={areFilmsEqual}
+                    // we may customize the default filmSelectProps.items by
+                    // adding newly created items to the list, so pass our own
+                    items={this.state.items}
                     noResults={<MenuItem disabled={true} text="No results." />}
                     onItemSelect={this.handleFilmSelect}
                     popoverProps={{ minimal: popoverMinimal }}
@@ -96,6 +121,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"
@@ -150,11 +180,40 @@ export class MultiSelectExample extends React.PureComponent<IExampleProps, IMult
     }
 
     private selectFilm(film: IFilm) {
-        this.setState({ films: [...this.state.films, film] });
+        const { films } = this.state;
+
+        const { createdItems: nextCreatedItems, items: nextItems } = maybeAddCreatedFilmToArrays(
+            this.state.items,
+            this.state.createdItems,
+            film,
+        );
+
+        this.setState({
+            createdItems: nextCreatedItems,
+            // Avoid re-creating an item that is already selected (the "Create
+            // Item" option will be shown even if it matches an already selected
+            // item).
+            films: !arrayContainsFilm(films, film) ? [...films, film] : films,
+            items: nextItems,
+        });
     }
 
     private deselectFilm(index: number) {
-        this.setState({ films: this.state.films.filter((_film, i) => i !== index) });
+        const { films } = this.state;
+
+        const film = films[index];
+        const { createdItems: nextCreatedItems, items: nextItems } = maybeDeleteCreatedFilmFromArrays(
+            this.state.items,
+            this.state.createdItems,
+            film,
+        );
+
+        // Delete the item if the user manually created it.
+        this.setState({
+            createdItems: nextCreatedItems,
+            films: films.filter((_film, i) => i !== index),
+            items: nextItems,
+        });
     }
 
     private handleFilmSelect = (film: IFilm) => {
diff --git a/packages/docs-app/src/examples/select-examples/omnibarExample.tsx b/packages/docs-app/src/examples/select-examples/omnibarExample.tsx
index 828144e87e..59ba8944ae 100644
--- a/packages/docs-app/src/examples/select-examples/omnibarExample.tsx
+++ b/packages/docs-app/src/examples/select-examples/omnibarExample.tsx
@@ -20,11 +20,12 @@ import {
 } from "@blueprintjs/core";
 import { Example, handleBooleanChange, IExampleProps } from "@blueprintjs/docs-theme";
 import { Omnibar } from "@blueprintjs/select";
-import { filmSelectProps, IFilm } from "./films";
+import { areFilmsEqual, createFilm, filmSelectProps, IFilm, renderCreateFilmOption } from "./films";
 
 const FilmOmnibar = Omnibar.ofType<IFilm>();
 
 export interface IOmnibarExampleState {
+    allowCreate: boolean;
     isOpen: boolean;
     resetOnSelect: boolean;
 }
@@ -32,10 +33,12 @@ export interface IOmnibarExampleState {
 @HotkeysTarget
 export class OmnibarExample extends React.PureComponent<IExampleProps, IOmnibarExampleState> {
     public state: IOmnibarExampleState = {
+        allowCreate: false,
         isOpen: false,
         resetOnSelect: true,
     };
 
+    private handleAllowCreateChange = handleBooleanChange(allowCreate => this.setState({ allowCreate }));
     private handleResetChange = handleBooleanChange(resetOnSelect => this.setState({ resetOnSelect }));
 
     private toaster: Toaster;
@@ -59,15 +62,13 @@ export class OmnibarExample extends React.PureComponent<IExampleProps, IOmnibarE
     }
 
     public render() {
-        const options = (
-            <>
-                <H5>Props</H5>
-                <Switch label="Reset on select" checked={this.state.resetOnSelect} onChange={this.handleResetChange} />
-            </>
-        );
+        const { allowCreate } = this.state;
+
+        const maybeCreateNewItemFromQuery = allowCreate ? createFilm : undefined;
+        const maybeCreateNewItemRenderer = allowCreate ? renderCreateFilmOption : null;
 
         return (
-            <Example options={options} {...this.props}>
+            <Example options={this.renderOptions()} {...this.props}>
                 <span>
                     <Button text="Click to show Omnibar" onClick={this.handleClick} />
                     {" or press "}
@@ -77,6 +78,9 @@ export class OmnibarExample extends React.PureComponent<IExampleProps, IOmnibarE
                 <FilmOmnibar
                     {...filmSelectProps}
                     {...this.state}
+                    createNewItemFromQuery={maybeCreateNewItemFromQuery}
+                    createNewItemRenderer={maybeCreateNewItemRenderer}
+                    itemsEqual={areFilmsEqual}
                     noResults={<MenuItem disabled={true} text="No results." />}
                     onItemSelect={this.handleItemSelect}
                     onClose={this.handleClose}
@@ -86,6 +90,20 @@ export class OmnibarExample extends React.PureComponent<IExampleProps, IOmnibarE
         );
     }
 
+    protected renderOptions() {
+        return (
+            <>
+                <H5>Props</H5>
+                <Switch label="Reset on select" checked={this.state.resetOnSelect} onChange={this.handleResetChange} />
+                <Switch
+                    label="Allow creating new films"
+                    checked={this.state.allowCreate}
+                    onChange={this.handleAllowCreateChange}
+                />
+            </>
+        );
+    }
+
     private handleClick = (_event: React.MouseEvent<HTMLElement>) => {
         this.setState({ isOpen: true });
     };
diff --git a/packages/docs-app/src/examples/select-examples/selectExample.tsx b/packages/docs-app/src/examples/select-examples/selectExample.tsx
index 352723b0f4..9e4a774bea 100644
--- a/packages/docs-app/src/examples/select-examples/selectExample.tsx
+++ b/packages/docs-app/src/examples/select-examples/selectExample.tsx
@@ -9,14 +9,26 @@ 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 {
+    areFilmsEqual,
+    createFilm,
+    filmSelectProps,
+    IFilm,
+    maybeAddCreatedFilmToArrays,
+    maybeDeleteCreatedFilmFromArrays,
+    renderCreateFilmOption,
+    TOP_100_FILMS,
+} from "./films";
 
 const FilmSelect = Select.ofType<IFilm>();
 
 export interface ISelectExampleState {
+    allowCreate: boolean;
+    createdItems: IFilm[];
     film: IFilm;
     filterable: boolean;
     hasInitialContent: boolean;
+    items: IFilm[];
     minimal: boolean;
     resetOnClose: boolean;
     resetOnQuery: boolean;
@@ -27,17 +39,21 @@ export interface ISelectExampleState {
 
 export class SelectExample extends React.PureComponent<IExampleProps, ISelectExampleState> {
     public state: ISelectExampleState = {
+        allowCreate: false,
+        createdItems: [],
         disableItems: false,
         disabled: false,
         film: TOP_100_FILMS[0],
         filterable: true,
         hasInitialContent: false,
+        items: filmSelectProps.items,
         minimal: false,
         resetOnClose: false,
         resetOnQuery: true,
         resetOnSelect: false,
     };
 
+    private handleAllowCreateChange = this.handleSwitchChange("allowCreate");
     private handleDisabledChange = this.handleSwitchChange("disabled");
     private handleFilterableChange = this.handleSwitchChange("filterable");
     private handleInitialContentChange = this.handleSwitchChange("hasInitialContent");
@@ -48,21 +64,29 @@ export class SelectExample extends React.PureComponent<IExampleProps, ISelectExa
     private handleResetOnSelectChange = this.handleSwitchChange("resetOnSelect");
 
     public render() {
-        const { disabled, disableItems, film, minimal, ...flags } = this.state;
+        const { allowCreate, disabled, disableItems, film, minimal, ...flags } = this.state;
 
         const initialContent = this.state.hasInitialContent ? (
             <MenuItem disabled={true} text={`${TOP_100_FILMS.length} items loaded.`} />
         ) : (
             undefined
         );
+        const maybeCreateNewItemFromQuery = allowCreate ? createFilm : undefined;
+        const maybeCreateNewItemRenderer = allowCreate ? renderCreateFilmOption : null;
 
         return (
             <Example options={this.renderOptions()} {...this.props}>
                 <FilmSelect
                     {...filmSelectProps}
                     {...flags}
+                    createNewItemFromQuery={maybeCreateNewItemFromQuery}
+                    createNewItemRenderer={maybeCreateNewItemRenderer}
                     disabled={disabled}
                     itemDisabled={this.isItemDisabled}
+                    itemsEqual={areFilmsEqual}
+                    // we may customize the default filmSelectProps.items by
+                    // adding newly created items to the list, so pass our own
+                    items={this.state.items}
                     initialContent={initialContent}
                     noResults={<MenuItem disabled={true} text="No results." />}
                     onItemSelect={this.handleValueChange}
@@ -110,6 +134,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,7 +149,21 @@ export class SelectExample extends React.PureComponent<IExampleProps, ISelectExa
         );
     }
 
-    private handleValueChange = (film: IFilm) => this.setState({ film });
+    private handleValueChange = (film: IFilm) => {
+        // Delete the old film from the list if it was newly created.
+        const { createdItems, items } = maybeDeleteCreatedFilmFromArrays(
+            this.state.items,
+            this.state.createdItems,
+            this.state.film,
+        );
+        // Add the new film to the list if it is newly created.
+        const { createdItems: nextCreatedItems, items: nextItems } = maybeAddCreatedFilmToArrays(
+            items,
+            createdItems,
+            film,
+        );
+        this.setState({ createdItems: nextCreatedItems, film, items: nextItems });
+    };
 
     private handleSwitchChange(prop: keyof ISelectExampleState) {
         return (event: React.FormEvent<HTMLInputElement>) => {
diff --git a/packages/docs-app/src/examples/select-examples/suggestExample.tsx b/packages/docs-app/src/examples/select-examples/suggestExample.tsx
index 1ac95c9984..b8a8a8f2bc 100644
--- a/packages/docs-app/src/examples/select-examples/suggestExample.tsx
+++ b/packages/docs-app/src/examples/select-examples/suggestExample.tsx
@@ -9,13 +9,25 @@ import * as React from "react";
 import { H5, MenuItem, Switch } from "@blueprintjs/core";
 import { Example, IExampleProps } from "@blueprintjs/docs-theme";
 import { Suggest } from "@blueprintjs/select";
-import { filmSelectProps, IFilm, TOP_100_FILMS } from "./films";
+import {
+    areFilmsEqual,
+    createFilm,
+    filmSelectProps,
+    IFilm,
+    maybeAddCreatedFilmToArrays,
+    maybeDeleteCreatedFilmFromArrays,
+    renderCreateFilmOption,
+    TOP_100_FILMS,
+} from "./films";
 
 const FilmSuggest = Suggest.ofType<IFilm>();
 
 export interface ISuggestExampleState {
+    allowCreate: boolean;
     closeOnSelect: boolean;
+    createdItems: IFilm[];
     film: IFilm;
+    items: IFilm[];
     minimal: boolean;
     openOnKeyDown: boolean;
     resetOnClose: boolean;
@@ -25,8 +37,11 @@ export interface ISuggestExampleState {
 
 export class SuggestExample extends React.PureComponent<IExampleProps, ISuggestExampleState> {
     public state: ISuggestExampleState = {
+        allowCreate: false,
         closeOnSelect: true,
+        createdItems: [],
         film: TOP_100_FILMS[0],
+        items: filmSelectProps.items,
         minimal: true,
         openOnKeyDown: false,
         resetOnClose: false,
@@ -34,6 +49,7 @@ export class SuggestExample extends React.PureComponent<IExampleProps, ISuggestE
         resetOnSelect: false,
     };
 
+    private handleAllowCreateChange = this.handleSwitchChange("allowCreate");
     private handleCloseOnSelectChange = this.handleSwitchChange("closeOnSelect");
     private handleOpenOnKeyDownChange = this.handleSwitchChange("openOnKeyDown");
     private handleMinimalChange = this.handleSwitchChange("minimal");
@@ -42,13 +58,23 @@ export class SuggestExample extends React.PureComponent<IExampleProps, ISuggestE
     private handleResetOnSelectChange = this.handleSwitchChange("resetOnSelect");
 
     public render() {
-        const { film, minimal, ...flags } = this.state;
+        const { allowCreate, film, minimal, ...flags } = this.state;
+
+        const maybeCreateNewItemFromQuery = allowCreate ? createFilm : undefined;
+        const maybeCreateNewItemRenderer = allowCreate ? renderCreateFilmOption : null;
+
         return (
             <Example options={this.renderOptions()} {...this.props}>
                 <FilmSuggest
                     {...filmSelectProps}
                     {...flags}
+                    createNewItemFromQuery={maybeCreateNewItemFromQuery}
+                    createNewItemRenderer={maybeCreateNewItemRenderer}
                     inputValueRenderer={this.renderInputValue}
+                    itemsEqual={areFilmsEqual}
+                    // we may customize the default filmSelectProps.items by
+                    // adding newly created items to the list, so pass our own.
+                    items={this.state.items}
                     noResults={<MenuItem disabled={true} text="No results." />}
                     onItemSelect={this.handleValueChange}
                     popoverProps={{ minimal }}
@@ -86,6 +112,11 @@ export class SuggestExample extends React.PureComponent<IExampleProps, ISuggestE
                     checked={this.state.resetOnSelect}
                     onChange={this.handleResetOnSelectChange}
                 />
+                <Switch
+                    label="Allow creating new items"
+                    checked={this.state.allowCreate}
+                    onChange={this.handleAllowCreateChange}
+                />
                 <H5>Popover props</H5>
                 <Switch
                     label="Minimal popover style"
@@ -98,7 +129,21 @@ export class SuggestExample extends React.PureComponent<IExampleProps, ISuggestE
 
     private renderInputValue = (film: IFilm) => film.title;
 
-    private handleValueChange = (film: IFilm) => this.setState({ film });
+    private handleValueChange = (film: IFilm) => {
+        // delete the old film from the list if it was newly created
+        const { createdItems, items } = maybeDeleteCreatedFilmFromArrays(
+            this.state.items,
+            this.state.createdItems,
+            this.state.film,
+        );
+        // add the new film to the list if it is newly created
+        const { createdItems: nextCreatedItems, items: nextItems } = maybeAddCreatedFilmToArrays(
+            items,
+            createdItems,
+            film,
+        );
+        this.setState({ createdItems: nextCreatedItems, film, items: nextItems });
+    };
 
     private handleSwitchChange(prop: keyof ISuggestExampleState) {
         return (event: React.FormEvent<HTMLInputElement>) => {
diff --git a/packages/select/src/common/index.ts b/packages/select/src/common/index.ts
index dfd076af8d..e989e9a114 100644
--- a/packages/select/src/common/index.ts
+++ b/packages/select/src/common/index.ts
@@ -10,4 +10,5 @@ export { Classes };
 export * from "./itemListRenderer";
 export * from "./itemRenderer";
 export * from "./listItemsProps";
+export * from "./listItemsUtils";
 export * from "./predicate";
diff --git a/packages/select/src/common/itemListRenderer.ts b/packages/select/src/common/itemListRenderer.ts
index 6ed9969cda..79d5083ea5 100644
--- a/packages/select/src/common/itemListRenderer.ts
+++ b/packages/select/src/common/itemListRenderer.ts
@@ -1,9 +1,11 @@
-/*
+/*!
  * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
  *
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+import { ICreateNewItem } from "./listItemsUtils";
+
 /**
  * An object describing how to render the list of items.
  * An `itemListRenderer` receives this object as its sole argument.
@@ -13,7 +15,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: T | ICreateNewItem | 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..555ebe7580 100644
--- a/packages/select/src/common/listItemsProps.ts
+++ b/packages/select/src/common/listItemsProps.ts
@@ -1,12 +1,13 @@
 /*
-* Copyright 2018 Palantir Technologies, Inc. All rights reserved.
-*
-* Licensed under the terms of the LICENSE file distributed with this project.
-*/
+ * Copyright 2018 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the terms of the LICENSE file distributed with this project.
+ */
 
 import { IProps, Utils } from "@blueprintjs/core";
 import { ItemListRenderer } from "./itemListRenderer";
 import { ItemRenderer } from "./itemRenderer";
+import { ICreateNewItem } from "./listItemsUtils";
 import { ItemListPredicate, ItemPredicate } from "./predicate";
 
 /**
@@ -28,7 +29,7 @@ export interface IListItemsProps<T> extends IProps {
      * uncontrolled (managed by the component's state). Use `onActiveItemChange`
      * to listen for updates.
      */
-    activeItem?: T | null;
+    activeItem?: T | ICreateNewItem | null;
 
     /** Array of items in the list. */
     items: T[];
@@ -107,11 +108,21 @@ export interface IListItemsProps<T> extends IProps {
     noResults?: React.ReactNode;
 
     /**
-     * Invoked when user interaction should change the active item: arrow keys move it up/down
-     * 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.
+     * Invoked when user interaction should change the active item: arrow keys
+     * move it up/down 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.
+     *
+     * If the "Create Item" option is displayed and currently active, then
+     * `isCreateNewItem` will be `true` and `activeItem` will be `null`. In this
+     * case, you should provide a valid `ICreateNewItem` object to the
+     * `activeItem` _prop_ in order for the "Create Item" option to appear as
+     * active.
+     *
+     * __Note:__ You can instantiate a `ICreateNewItem` object using the
+     * `getCreateNewItem()` utility exported from this package.
      */
-    onActiveItemChange?: (activeItem: T | null) => void;
+    onActiveItemChange?: (activeItem: T | null, isCreateNewItem: boolean) => void;
 
     /**
      * Callback invoked when an item from the list is selected,
@@ -124,6 +135,26 @@ export interface IListItemsProps<T> extends IProps {
      */
     onQueryChange?: (query: string, event?: React.ChangeEvent<HTMLInputElement>) => void;
 
+    /**
+     * If provided, allows new items to be created using 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. If this function is provided, a "Create Item"
+     * option will be rendered at the end of the list of items. If this function
+     * is not provided, a "Create Item" option will not be displayed.
+     */
+    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/common/listItemsUtils.ts b/packages/select/src/common/listItemsUtils.ts
new file mode 100644
index 0000000000..c00de3e850
--- /dev/null
+++ b/packages/select/src/common/listItemsUtils.ts
@@ -0,0 +1,46 @@
+/*!
+ * Copyright 2018 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the terms of the LICENSE file distributed with this project.
+ */
+
+/**
+ * The reserved type of the "Create Item" option in item lists. This is intended
+ * not to conflict with any custom item type `T` that might be used in  item
+ * list.
+ */
+export interface ICreateNewItem {
+    __blueprintCreateNewItemBrand: "blueprint-create-new-item";
+}
+
+/** Returns an instance of a "Create Item" object. */
+export function getCreateNewItem(): ICreateNewItem {
+    return { __blueprintCreateNewItemBrand: "blueprint-create-new-item" };
+}
+
+/**
+ * Type guard returning `true` if the provided item (e.g. the current
+ * `activeItem`) is a "Create Item" option.
+ */
+export function isCreateNewItem<T>(item: T | ICreateNewItem | null | undefined): item is ICreateNewItem {
+    if (item == null) {
+        return false;
+    }
+
+    // see if the provided item exactly matches the `ICreateNewItem` object,
+    // with no superfluous keys.
+    const keys = Object.keys(item);
+    if (keys.length !== 1 || keys[0] !== "__blueprintCreateNewItemBrand") {
+        return false;
+    }
+    return (item as ICreateNewItem).__blueprintCreateNewItemBrand === "blueprint-create-new-item";
+}
+
+/**
+ * Returns the type of the the current active item. This will be a no-op unless
+ * the `activeItem` is `undefined` or a "Create Item" option, in which case
+ * `null` will be returned instead.
+ */
+export function getActiveItem<T>(activeItem: T | ICreateNewItem | null | undefined): T | null {
+    return activeItem == null || isCreateNewItem(activeItem) ? null : activeItem;
+}
diff --git a/packages/select/src/components/query-list/queryList.tsx b/packages/select/src/components/query-list/queryList.tsx
index a14077e0b6..cf4397b615 100644
--- a/packages/select/src/components/query-list/queryList.tsx
+++ b/packages/select/src/components/query-list/queryList.tsx
@@ -9,9 +9,13 @@ import * as React from "react";
 import { DISPLAYNAME_PREFIX, IProps, Keys, Menu, Utils } from "@blueprintjs/core";
 import {
     executeItemsEqual,
+    getActiveItem,
+    getCreateNewItem,
+    ICreateNewItem,
     IItemListRendererProps,
     IItemModifiers,
     IListItemsProps,
+    isCreateNewItem,
     renderFilteredItems,
 } from "../../common";
 
@@ -41,7 +45,9 @@ export interface IQueryListProps<T> extends IListItemsProps<T> {
  * An object describing how to render a `QueryList`.
  * A `QueryList` `renderer` receives this object as its sole argument.
  */
-export interface IQueryListRendererProps<T> extends IQueryListState<T>, IProps {
+export interface IQueryListRendererProps<T>  // Omit `createNewItem`, because it's used strictly for internal tracking.
+    extends Pick<IQueryListState<T>, "activeItem" | "filteredItems" | "query">,
+        IProps {
     /**
      * Selection handler that should be invoked when a new item has been chosen,
      * perhaps because the user clicked it.
@@ -72,7 +78,15 @@ export interface IQueryListRendererProps<T> extends IQueryListState<T>, IProps {
 
 export interface IQueryListState<T> {
     /** The currently focused item (for keyboard interactions). */
-    activeItem: T | null;
+    activeItem: T | ICreateNewItem | null;
+
+    /**
+     * The item returned from `createNewItemFromQuery(this.state.query)`, cached
+     * to avoid continuous reinstantions within `isCreateItemRendered`, where
+     * this element will be used to hide the "Create Item" option if its value
+     * matches the current `query`.
+     */
+    createNewItem: T | undefined;
 
     /** The original `items` array filtered by `itemListPredicate` or `itemPredicate`. */
     filteredItems: T[];
@@ -109,17 +123,21 @@ 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: T | ICreateNewItem | null = null;
 
     public constructor(props: IQueryListProps<T>, context?: any) {
         super(props, context);
-        const { query = "" } = this.props;
-        const filteredItems = getFilteredItems(query, this.props);
+
+        const { query = "" } = props;
+        const createNewItem = Utils.safeInvoke(props.createNewItemFromQuery, query);
+        const filteredItems = getFilteredItems(query, props);
+
         this.state = {
             activeItem:
                 this.props.activeItem !== undefined
                     ? this.props.activeItem
-                    : getFirstEnabledItem(filteredItems, this.props.itemDisabled),
+                    : getFirstEnabledItem(filteredItems, props.itemDisabled),
+            createNewItem,
             filteredItems,
             query,
         };
@@ -127,15 +145,16 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
 
     public render() {
         const { className, items, renderer, itemListRenderer = this.renderItemList } = this.props;
+        const { createNewItem, ...spreadableState } = this.state;
         return renderer({
-            ...this.state,
+            ...spreadableState,
             className,
             handleItemSelect: this.handleItemSelect,
             handleKeyDown: this.handleKeyDown,
             handleKeyUp: this.handleKeyUp,
             handleQueryChange: this.handleQueryChange,
             itemList: itemListRenderer({
-                ...this.state,
+                ...spreadableState,
                 items,
                 itemsParentRef: this.refHandlers.itemsParent,
                 renderItem: this.renderItem,
@@ -175,8 +194,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;
 
@@ -210,6 +229,8 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
     }
 
     public setQuery(query: string, resetActiveItem = this.props.resetOnQuery, props = this.props) {
+        const { createNewItemFromQuery } = props;
+
         this.shouldCheckActiveItemInViewport = true;
         const hasQueryChanged = query !== this.state.query;
         if (hasQueryChanged) {
@@ -217,16 +238,16 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
         }
 
         const filteredItems = getFilteredItems(query, props);
-        this.setState({ filteredItems, query });
+        const createNewItem =
+            createNewItemFromQuery != null && query !== "" ? createNewItemFromQuery(query) : undefined;
+        this.setState({ createNewItem, filteredItems, query });
 
         // always reset active item if it's now filtered or disabled
         const activeIndex = this.getActiveIndex(filteredItems);
         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 +257,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 +275,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,15 +287,33 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
         });
     };
 
+    private renderCreateItemMenuItem = (query: string) => {
+        const { activeItem } = this.state;
+        const handleClick: React.MouseEventHandler<HTMLElement> = evt => {
+            this.handleItemCreate(query, evt);
+        };
+        const isActive = isCreateNewItem(activeItem);
+        return Utils.safeInvoke(this.props.createNewItemRenderer, query, isActive, handleClick);
+    };
+
     private getActiveElement() {
+        const { activeItem } = this.state;
         if (this.itemsParentRef != null) {
-            return this.itemsParentRef.children.item(this.getActiveIndex()) as HTMLElement;
+            if (isCreateNewItem(activeItem)) {
+                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 || isCreateNewItem(activeItem)) {
+            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)) {
@@ -284,6 +332,16 @@ export class QueryList<T> extends React.Component<IQueryListProps<T>, IQueryList
         };
     }
 
+    private handleItemCreate = (query: string, evt?: React.SyntheticEvent<HTMLElement>) => {
+        // we keep a cached createNewItem in state, but might as well recompute
+        // the result just to be sure it's perfectly in sync with the query.
+        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);
         Utils.safeInvoke(this.props.onItemSelect, item, event);
@@ -310,9 +368,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 || isCreateNewItem(activeItem)) {
+                this.handleItemCreate(this.state.query, event);
+            } else {
+                this.handleItemSelect(activeItem, event);
+            }
         }
         Utils.safeInvoke(onKeyUp, event);
     };
@@ -328,18 +390,52 @@ 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()): T | ICreateNewItem | null {
+        if (this.isCreateItemRendered()) {
+            const reachedCreate =
+                (startIndex === 0 && direction === -1) ||
+                (startIndex === this.state.filteredItems.length - 1 && direction === 1);
+            if (reachedCreate) {
+                return getCreateNewItem();
+            }
+        }
         return getFirstEnabledItem(this.state.filteredItems, this.props.itemDisabled, direction, startIndex);
     }
 
-    private setActiveItem(activeItem: T | null) {
+    private setActiveItem(activeItem: T | ICreateNewItem | null) {
         this.expectedNextActiveItem = activeItem;
         if (this.props.activeItem === undefined) {
             // indicate that the active item may need to be scrolled into view after update.
             this.shouldCheckActiveItemInViewport = true;
             this.setState({ activeItem });
         }
-        Utils.safeInvoke(this.props.onActiveItemChange, activeItem);
+
+        if (isCreateNewItem(activeItem)) {
+            Utils.safeInvoke(this.props.onActiveItemChange, null, true);
+        } else {
+            Utils.safeInvoke(this.props.onActiveItemChange, activeItem, false);
+        }
+    }
+
+    private isCreateItemRendered(): boolean {
+        const { createNewItemFromQuery } = this.props;
+        return (
+            createNewItemFromQuery != null &&
+            this.props.createNewItemRenderer != null &&
+            this.state.query !== "" &&
+            // this check is unfortunately O(N) on the number of items, but
+            // alas, hiding the "Create Item" option when it exactly matches an
+            // existing item is much clearer.
+            !this.wouldCreatedItemMatchSomeExistingItem()
+        );
+    }
+
+    private wouldCreatedItemMatchSomeExistingItem() {
+        // search only the filtered items, not the full items list, because we
+        // only need to check items that match the current query.
+        return this.state.filteredItems.some(item =>
+            executeItemsEqual(this.props.itemsEqual, item, this.state.createNewItem),
+        );
     }
 }
 
@@ -389,7 +485,7 @@ export function getFirstEnabledItem<T>(
     itemDisabled?: keyof T | ((item: T, index: number) => boolean),
     direction = 1,
     startIndex = items.length - 1,
-): T | null {
+): T | ICreateNewItem | null {
     if (items.length === 0) {
         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..05b6b549dd 100644
--- a/packages/select/src/components/select/select-component.md
+++ b/packages/select/src/components/select/select-component.md
@@ -82,6 +82,121 @@ 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.
 
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
+    To control the active item when a "Create Item" option is present, See [Controlling the active item](#select/select-component.controlling-the-active-item) in the "Creating new items" section below.
+</div>
+
+@## Creating new items
+
+If you wish, you can allow users to select a brand new item that doesn't appear
+in the list, based on the current query string. Use `createNewItemFromQuery` and
+`createNewItemRenderer` to enable this:
+- `createNewItemFromQuery`: Specifies how to convert a user-entered query string
+into an item of type `<T>` that `Select` understands.
+- `createNewItemRenderer`: Renders a custom "Create Item" element that will be
+shown at the bottom of the list. When selected via click or `Enter`, this element
+will invoke `onItemSelect` with the item returned from `createNewItemFromQuery`.
+
+<div class="@ns-callout @ns-intent-warning @ns-icon-info-sign">
+    <h4 class="@ns-heading">Avoiding type conflicts</h4>
+    The "Create Item" option is represented by the reserved type `ICreateNewItem`
+    exported from this package. It is exceedingly unlikely but technically possible
+    for your custom type `<T>` to conflict with this type. If your type conflicts,
+    you may see unexpected behavior; to resolve, consider changing the schema for
+    your items.
+</div>
+
+```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
+        createNewItemFromQuery={createFilm}
+        createNewItemRenderer={renderCreateFilmOption}
+        items={Films.items}
+        itemPredicate={Films.itemPredicate}
+        itemRenderer={Films.itemRenderer}
+        noResults={<MenuItem disabled={true} text="No results." />}
+        onItemSelect={...}
+    />,
+    document.querySelector("#root")
+);
+```
+
+@### Controlling the active item
+
+Controlling the active item is slightly more involved when the "Create Item"
+option is present. At a high level, the process works the same way as before:
+control the `activeItem` value and listen for updates via `onActiveItemChange`.
+However, some special handling is required.
+
+When the "Create Item" option is present, the callback will emit
+`activeItem=null` and `isCreateNewItem=true`:
+
+```tsx
+onActiveItemChange(null, true);
+```
+
+You can then make the "Create Item" option active by passing the result of
+`getCreateNewItem()` to the `activeItem` prop (the `getCreateNewItem` function
+is exported from this package):
+
+```tsx
+activeItem={isCreateNewItemActive ? getCreateNewItem() : activeItem}
+```
+
+Altogether, the code might look something like this:
+
+```tsx
+const currentActiveItem: Film | ICreateNewItem | null;
+const isCreateNewItemActive: Film | ICreateNewItem | null;
+
+function handleActiveItemChange(
+    activeItem: Film | ICreateNewItem | null,
+    isCreateNewItem: boolean,
+) {
+    currentActiveItem = activeItem;
+    isCreateNewItemActive = isCreateNewItem;
+}
+
+function getActiveItem() {
+    return isCreateNewItemActive ? getCreateNewItem() : currentActiveItem;
+}
+
+ReactDOM.render(
+    <FilmSelect
+        {...} // Other required props (see previous examples).
+        activeItem={getActiveItem()}
+        createNewItemFromQuery={...}
+        createNewItemRenderer={...}
+        onActiveItemChange={handleActiveItemChange}
+    />,
+    document.querySelector("#root")
+);
+```
+
 @## JavaScript API
 
 @interface ISelectProps
diff --git a/packages/select/test/selectComponentSuite.tsx b/packages/select/test/selectComponentSuite.tsx
index ec6fc82abc..631fbe7717 100644
--- a/packages/select/test/selectComponentSuite.tsx
+++ b/packages/select/test/selectComponentSuite.tsx
@@ -9,7 +9,14 @@ import { assert } from "chai";
 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 {
+    areFilmsEqual,
+    createFilm,
+    filterFilm,
+    IFilm,
+    renderFilm,
+    TOP_100_FILMS,
+} from "../../docs-app/src/examples/select-examples/films";
 import { IListItemsProps } from "../src/index";
 
 export function selectComponentSuite<P extends IListItemsProps<IFilm>, S>(
@@ -21,6 +28,7 @@ export function selectComponentSuite<P extends IListItemsProps<IFilm>, S>(
         itemPredicate: filterFilm,
         itemRenderer: sinon.spy(renderFilm),
         items: TOP_100_FILMS.slice(0, 20),
+        itemsEqual: areFilmsEqual,
         onActiveItemChange: sinon.spy(),
         onItemSelect: sinon.spy(),
         onQueryChange: sinon.spy(),
@@ -119,4 +127,111 @@ export function selectComponentSuite<P extends IListItemsProps<IFilm>, S>(
             assert.equal(testProps.onItemSelect.lastCall.args[0], activeItem);
         });
     });
+
+    describe("create", () => {
+        const testCreateProps = {
+            ...testProps,
+            createNewItemFromQuery: sinon.spy(),
+            createNewItemRenderer: () => <textarea />,
+            noResults: <address />,
+        };
+
+        beforeEach(() => {
+            testCreateProps.createNewItemFromQuery.resetHistory();
+        });
+
+        it("doesn't render create item if input is empty", () => {
+            const wrapper = render({
+                ...testCreateProps,
+                query: "",
+            });
+            assert.lengthOf(findCreateItem(wrapper), 0, "should not find createItem");
+        });
+
+        it("doesn't render create item if query is non-empty and matches one of the items", () => {
+            const EXISTING_FILM_TITLE = TOP_100_FILMS[0].title;
+            const wrapper = render({
+                ...testCreateProps,
+                // We need this callback to return a real item this time, and we
+                // don't need to spy on it.
+                createNewItemFromQuery: createFilm,
+                query: EXISTING_FILM_TITLE,
+            });
+            assert.lengthOf(wrapper.find("address"), 0, "should not find noResults");
+            assert.lengthOf(findCreateItem(wrapper), 0, "should not find createItem");
+        });
+
+        it("renders create item if query is not empty and doesn't match any items exactly", () => {
+            const wrapper = render({
+                ...testCreateProps,
+                query: TOP_100_FILMS[0].title + " a few extra chars",
+            });
+            assert.lengthOf(wrapper.find("address"), 0, "should not find noResults");
+            assert.lengthOf(findCreateItem(wrapper), 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(findCreateItem(wrapper), 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 activeItem=null and isCreateNewItem=true", () => {
+            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], null);
+            assert.equal(testProps.onActiveItemChange.lastCall.args[1], true);
+            findInput(wrapper).simulate("keydown", { keyCode: Keys.ARROW_DOWN });
+            assert.equal((testProps.onActiveItemChange.lastCall.args[0] as IFilm).rank, TOP_100_FILMS[0].rank);
+            assert.equal(testProps.onActiveItemChange.lastCall.args[1], false);
+        });
+
+        it("when create item is rendered, arrow up invokes onActiveItemChange with an `ICreateNewItem`", () => {
+            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], null);
+            assert.equal(testProps.onActiveItemChange.lastCall.args[1], true);
+            findInput(wrapper).simulate("keydown", { keyCode: Keys.ARROW_UP });
+            assert.equal((testProps.onActiveItemChange.lastCall.args[0] as IFilm).rank, TOP_100_FILMS[0].rank);
+            assert.equal(testProps.onActiveItemChange.lastCall.args[1], false);
+        });
+
+        it("when create item is rendered, updating the query to exactly match one of the items hides the create item", () => {
+            const wrapper = render({
+                ...testCreateProps,
+                // Again, we need this callback to return a real item this time.
+                createNewItemFromQuery: createFilm,
+                query: "non-empty, non-matching initial value",
+            });
+
+            assert.lengthOf(findCreateItem(wrapper), 1, "should find createItem");
+
+            const EXISTING_FILM_TITLE = TOP_100_FILMS[0].title;
+            findInput(wrapper).simulate("change", { target: { value: EXISTING_FILM_TITLE } });
+
+            assert.lengthOf(findCreateItem(wrapper), 0, "should not find createItem");
+        });
+    });
+
+    function findCreateItem(wrapper: ReactWrapper<P, S>) {
+        return wrapper.find("textarea");
+    }
 }