diff --git a/packages/components/src/toggle-control/README.md b/packages/components/src/toggle-control/README.md
index c41bb464a44f3..a55c0f30df8bb 100644
--- a/packages/components/src/toggle-control/README.md
+++ b/packages/components/src/toggle-control/README.md
@@ -55,3 +55,10 @@ A function that receives the checked state (boolean) as input.
 - Type: `function`
 - Required: Yes
 
+### className
+
+The class that will be added with `components-base-control` and `components-toggle-control` to the classes of the wrapper div. If no className is passed only `components-base-control` and `components-toggle-control` are used.
+
+Type: String
+Required: No
+
diff --git a/packages/components/src/toggle-control/index.js b/packages/components/src/toggle-control/index.js
index 29d558d6b80c6..39f4a7f372715 100644
--- a/packages/components/src/toggle-control/index.js
+++ b/packages/components/src/toggle-control/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { isFunction } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -29,7 +30,7 @@ class ToggleControl extends Component {
 	}
 
 	render() {
-		const { label, checked, help, instanceId } = this.props;
+		const { label, checked, help, instanceId, className } = this.props;
 		const id = `inspector-toggle-control-${ instanceId }`;
 
 		let describedBy, helpLabel;
@@ -42,7 +43,7 @@ class ToggleControl extends Component {
 			<BaseControl
 				id={ id }
 				help={ helpLabel }
-				className="components-toggle-control"
+				className={ classnames( 'components-toggle-control', className ) }
 			>
 				<FormToggle
 					id={ id }