diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1b1a4b321035..f0ce27e6e10c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
## [`master`](https://github.com/elastic/eui/tree/master)
+**Breaking changes**
+
+- `EuiSearchBar` no longer has an `onParse` callback, and now passes an object to `onChange` with the shape `{ query, queryText, error }` ([#863](https://github.com/elastic/eui/pull/863))
+- `EuiInMemoryTable`'s `search.onChange` callback now passes an object with `{ query, queryText, error }` instead of only the query ([#863](https://github.com/elastic/eui/pull/863))
+
**Bug fixes**
- `EuiButton`, `EuiButtonEmpty`, and `EuiButtonIcon` now look and behave disabled when `isDisabled={true}` ([#862](https://github.com/elastic/eui/pull/862))
diff --git a/src-docs/src/views/search_bar/controlled_search_bar.js b/src-docs/src/views/search_bar/controlled_search_bar.js
new file mode 100644
index 000000000000..de5800148f31
--- /dev/null
+++ b/src-docs/src/views/search_bar/controlled_search_bar.js
@@ -0,0 +1,312 @@
+import React, { Component, Fragment } from 'react';
+import { times } from 'lodash';
+import { Random } from '../../../../src/services/random';
+import {
+ EuiHealth,
+ EuiCallOut,
+ EuiSpacer,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiSwitch,
+ EuiBasicTable,
+ EuiSearchBar,
+ EuiButton,
+} from '../../../../src/components';
+
+const random = new Random();
+
+const tags = [
+ { name: 'marketing', color: 'danger' },
+ { name: 'finance', color: 'success' },
+ { name: 'eng', color: 'success' },
+ { name: 'sales', color: 'warning' },
+ { name: 'ga', color: 'success' }
+];
+
+const types = [
+ 'dashboard',
+ 'visualization',
+ 'watch',
+];
+
+const users = [
+ 'dewey',
+ 'wanda',
+ 'carrie',
+ 'jmack',
+ 'gabic',
+];
+
+const items = times(10, (id) => {
+ return {
+ id,
+ status: random.oneOf(['open', 'closed']),
+ type: random.oneOf(types),
+ tag: random.setOf(tags.map(tag => tag.name), { min: 0, max: 3 }),
+ active: random.boolean(),
+ owner: random.oneOf(users),
+ followers: random.integer({ min: 0, max: 20 }),
+ comments: random.integer({ min: 0, max: 10 }),
+ stars: random.integer({ min: 0, max: 5 })
+ };
+});
+
+const loadTags = () => {
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(tags.map(tag => ({
+ value: tag.name,
+ view: {tag.name}
+ })));
+ }, 2000);
+ });
+};
+
+const initialQuery = EuiSearchBar.Query.MATCH_ALL;
+
+export class ControlledSearchBar extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ query: initialQuery,
+ result: items,
+ error: null,
+ incremental: false
+ };
+ }
+
+ onChange = ({ query, error }) => {
+ if (error) {
+ this.setState({ error });
+ } else {
+ this.setState({
+ error: null,
+ result: EuiSearchBar.Query.execute(query, items, { defaultFields: ['owner', 'tag', 'type'] }),
+ query
+ });
+ }
+ };
+
+ toggleIncremental = () => {
+ this.setState(prevState => ({ incremental: !prevState.incremental }));
+ };
+
+ setQuery = query => {
+ this.setState({ query });
+ }
+
+ renderBookmarks() {
+ return (
+
+ Enter a query, or select one from a bookmark
+
+
+
+ this.setQuery('status:open owner:dewey')}>mine, open
+
+
+ this.setQuery('status:closed owner:dewey')}>mine, closed
+
+
+
+
+ );
+ }
+
+ renderSearch() {
+ const { incremental } = this.state;
+
+ const filters = [
+ {
+ type: 'field_value_toggle_group',
+ field: 'status',
+ items: [
+ {
+ value: 'open',
+ name: 'Open'
+ },
+ {
+ value: 'closed',
+ name: 'Closed'
+ }
+ ]
+ },
+ {
+ type: 'is',
+ field: 'active',
+ name: 'Active',
+ negatedName: 'Inactive'
+ },
+ {
+ type: 'field_value_toggle',
+ name: 'Mine',
+ field: 'owner',
+ value: 'dewey'
+ },
+ {
+ type: 'field_value_selection',
+ field: 'tag',
+ name: 'Tag',
+ multiSelect: 'or',
+ cache: 10000, // will cache the loaded tags for 10 sec
+ options: () => loadTags()
+ }
+ ];
+
+ const schema = {
+ strict: true,
+ fields: {
+ active: {
+ type: 'boolean'
+ },
+ status: {
+ type: 'string'
+ },
+ followers: {
+ type: 'number'
+ },
+ comments: {
+ type: 'number'
+ },
+ stars: {
+ type: 'number'
+ },
+ created: {
+ type: 'date'
+ },
+ owner: {
+ type: 'string'
+ },
+ tag: {
+ type: 'string',
+ validate: (value) => {
+ if (!tags.some(tag => tag.name === value)) {
+ throw new Error(`unknown tag (possible values: ${tags.map(tag => tag.name).join(',')})`);
+ }
+ }
+ }
+ }
+ };
+
+ return (
+
+ );
+ }
+
+ renderError() {
+ const { error } = this.state;
+ if (!error) {
+ return;
+ }
+ return (
+
+
+
+
+ );
+ }
+
+ renderTable() {
+ const columns = [
+ {
+ name: 'Type',
+ field: 'type'
+ },
+ {
+ name: 'Open',
+ field: 'status',
+ render: (status) => status === 'open' ? 'Yes' : 'No'
+ },
+ {
+ name: 'Active',
+ field: 'active',
+ dataType: 'boolean'
+ },
+ {
+ name: 'Tags',
+ field: 'tag'
+ },
+ {
+ name: 'Owner',
+ field: 'owner'
+ },
+ {
+ name: 'Stats',
+ width: '150px',
+ render: (item) => {
+ return (
+
+
{`${item.stars} Stars`}
+
{`${item.followers} Followers`}
+
{`${item.comments} Comments`}
+
+
+ A EuiSearchBar can have its query controlled by a parent component by passing the query prop. Changes to the query will be passed back up through the onChange callback where the new Query must be stored in state and passed back into the search bar.
+
+