diff --git a/docs/docs/components/toggle.md b/docs/docs/components/toggle.md
new file mode 100644
index 00000000..e561f0cf
--- /dev/null
+++ b/docs/docs/components/toggle.md
@@ -0,0 +1,31 @@
+---
+id: toggle
+title: Toggle
+---
+
+`Toggle` renders a Toggle Checkbox in a Card element providing a filter for the performed search.
+
+## Usage
+
+```jsx
+
+```
+
+## Props
+
+* **title** `String` *optional*
+
+ The optional title for the Card element.
+
+* **label** `label` *optional*
+
+ An optional label to for the Checkbox element.
+
+- **filterValue** `Array`
+
+ An array containing the filter to be applied to the search query when active.
+
diff --git a/src/lib/components/Toggle/Toggle.js b/src/lib/components/Toggle/Toggle.js
new file mode 100644
index 00000000..68fc87aa
--- /dev/null
+++ b/src/lib/components/Toggle/Toggle.js
@@ -0,0 +1,70 @@
+/*
+ * This file is part of React-SearchKit.
+ * Copyright (C) 2020 CERN.
+ *
+ * React-SearchKit is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import React, { Component } from 'react';
+import { Checkbox } from 'semantic-ui-react';
+import Overridable from 'react-overridable';
+import _get from 'lodash/get';
+import { Card } from 'semantic-ui-react';
+import PropTypes from 'prop-types';
+
+class ToggleComponent extends Component{
+
+ _isChecked = (userSelectionFilters) => {
+ const isFilterActive = userSelectionFilters.filter(
+ (filter) => filter[0] === this.props.filterValue[0]
+ ).length > 0
+ return isFilterActive
+ };
+
+ onToggleClicked = () => {
+ this.props.updateQueryFilters(this.props.filterValue);
+ };
+
+ render() {
+ const {
+ userSelectionFilters,
+ overridableId,
+ ...props
+ } = this.props;
+ var isChecked = this._isChecked(userSelectionFilters);
+ return(
+
+
+
+
+ {this.props.title}
+
+
+
+
+
+
+ )
+ }
+}
+
+ToggleComponent.propTypes = {
+ title: PropTypes.string,
+ label: PropTypes.string,
+ userSelectionFilters: PropTypes.array.isRequired,
+ updateQueryFilters: PropTypes.func.isRequired,
+ overridableId: PropTypes.string,
+ };
+
+ ToggleComponent.defaultProps = {
+ overridableId: '',
+ };
+
+export default Overridable.component(
+ 'SearchFilters.ToggleComponent', ToggleComponent);
diff --git a/src/lib/components/Toggle/index.js b/src/lib/components/Toggle/index.js
new file mode 100644
index 00000000..b3bf1cdb
--- /dev/null
+++ b/src/lib/components/Toggle/index.js
@@ -0,0 +1,22 @@
+/*
+ * This file is part of React-SearchKit.
+ * Copyright (C) 2020 CERN.
+ *
+ * React-SearchKit is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import { connect } from '../../store';
+import { updateQueryFilters } from '../../state/actions';
+import ToggleComponent from './Toggle';
+
+const mapDispatchToProps = dispatch => ({
+ updateQueryFilters: filter => dispatch(updateQueryFilters(filter)),
+});
+
+export const Toggle = connect(
+ state => ({
+ userSelectionFilters: state.query.filters
+ }),
+ mapDispatchToProps,
+)(ToggleComponent);
diff --git a/src/lib/components/index.js b/src/lib/components/index.js
index a47e7683..3cfc4add 100644
--- a/src/lib/components/index.js
+++ b/src/lib/components/index.js
@@ -8,6 +8,7 @@
export { ActiveFilters } from './ActiveFilters';
export { BucketAggregation } from './BucketAggregation';
+export { Toggle } from './Toggle';
export { AutocompleteSearchBar } from './AutocompleteSearchBar';
export { Count } from './Count';
export { EmptyResults } from './EmptyResults';