diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts
index aa24a5635ce56..c1178944cc202 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts
@@ -46,7 +46,8 @@ export interface IFocusTrapZoneProps extends React.HTMLAttributes<HTMLDivElement
   forceFocusInsideTrap?: boolean;
 
   /**
-   * Indicates the selector for first focusable item.  Only applies if focusPreviouslyFocusedInnerElement == false.
+   * Class name for first focusable item (do not append a dot).
+   * Only applies if `focusPreviouslyFocusedInnerElement` is false.
    */
   firstFocusableSelector?: string | (() => string);
 
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx
index 660d3c9215e2b..92dad15ff751c 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx
@@ -1,99 +1,66 @@
 import * as React from 'react';
 
-import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
 import { Link } from 'office-ui-fabric-react/lib/Link';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { Toggle, IToggle } from 'office-ui-fabric-react/lib/Toggle';
-import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
-
-const contentClass = mergeStyles({
-  border: '1px dashed #ababab'
-});
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 
 export interface IFocusTrapZoneBoxClickExampleState {
-  isToggled: boolean;
+  useTrapZone: boolean;
 }
 
 export class FocusTrapZoneBoxClickExample extends React.Component<{}, IFocusTrapZoneBoxClickExampleState> {
-  public state: IFocusTrapZoneBoxClickExampleState = {
-    isToggled: false
-  };
+  public state: IFocusTrapZoneBoxClickExampleState = { useTrapZone: false };
 
-  private _toggle: IToggle;
+  private _toggle = React.createRef<IToggle>();
 
   public render() {
-    const { isToggled } = this.state;
-
     return (
       <div>
-        <DefaultButton secondaryText="Focuses inside the FocusTrapZone" onClick={this._onButtonClickHandler} text="Go to Trap Zone" />
-
-        {(() => {
-          if (isToggled) {
-            return (
-              <FocusTrapZone isClickableOutsideFocusTrap={true} forceFocusInsideTrap={false}>
-                {this._internalContents()}
-              </FocusTrapZone>
-            );
-          } else {
-            return <div>{this._internalContents()}</div>;
-          }
-        })()}
+        {this.state.useTrapZone ? (
+          <FocusTrapZone isClickableOutsideFocusTrap={true} forceFocusInsideTrap={false}>
+            {this._internalContents()}
+          </FocusTrapZone>
+        ) : (
+          this._internalContents()
+        )}
       </div>
     );
   }
 
   private _internalContents() {
-    const { isToggled } = this.state;
+    const { useTrapZone } = this.state;
 
     return (
-      <div className={contentClass}>
-        <TextField label="Default TextField" placeholder="Input inside Focus Trap Zone" />
-        <Link href="">Hyperlink inside FocusTrapZone</Link>
-        <br />
-        <br />
+      <Stack
+        gap={15}
+        horizontalAlign="start"
+        styles={{
+          root: { border: `2px dashed ${useTrapZone ? '#ababab' : 'transparent'}`, padding: 10 }
+        }}
+      >
         <Toggle
-          componentRef={this._setRef}
-          checked={isToggled}
+          label="Use trap zone"
+          componentRef={this._toggle}
+          checked={useTrapZone}
           onChange={this._onFocusTrapZoneToggleChanged}
-          label="Focus Trap Zone"
-          onText="On"
+          onText="On (toggle to exit)"
           offText="Off"
         />
-        {(() => {
-          if (isToggled) {
-            return (
-              <DefaultButton secondaryText="Exit Focus Trap Zone" onClick={this._onExitButtonClickHandler} text="Exit Focus Trap Zone" />
-            );
-          }
-        })()}
-      </div>
+        <TextField label="Input inside trap zone" styles={{ root: { width: 300 } }} />
+        <Link href="https://bing.com">Hyperlink inside trap zone</Link>
+      </Stack>
     );
   }
 
-  private _onButtonClickHandler = (): void => {
-    this.setState({
-      isToggled: true
+  private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
+    this.setState({ useTrapZone: !!checked }, () => {
+      // Restore focus to toggle after disabling the trap zone
+      // (the trap zone itself will handle initial focus when it's enabled)
+      if (!checked) {
+        this._toggle.current!.focus();
+      }
     });
   };
-
-  private _onExitButtonClickHandler = (): void => {
-    this.setState({
-      isToggled: false
-    });
-  };
-
-  private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, isToggled: boolean): void => {
-    this.setState(
-      {
-        isToggled: isToggled
-      },
-      () => this._toggle.focus()
-    );
-  };
-
-  private _setRef = (toggle: IToggle): void => {
-    this._toggle = toggle;
-  };
 }
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx
index b430c28a8f201..fe95135bb9380 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx
@@ -1,95 +1,67 @@
 import * as React from 'react';
 
-import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
 import { Link } from 'office-ui-fabric-react/lib/Link';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { Toggle, IToggle } from 'office-ui-fabric-react/lib/Toggle';
-import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
-
-const contentClass = mergeStyles({
-  border: '1px dashed #ababab'
-});
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 
 export interface IFocusTrapZoneBoxExampleState {
-  isChecked: boolean;
+  useTrapZone: boolean;
 }
 
 export class FocusTrapZoneBoxExample extends React.Component<{}, IFocusTrapZoneBoxExampleState> {
   public state: IFocusTrapZoneBoxExampleState = {
-    isChecked: false
+    useTrapZone: false
   };
 
-  private _toggle: IToggle;
+  private _toggle = React.createRef<IToggle>();
 
   public render() {
-    const { isChecked } = this.state;
-
     return (
       <div>
-        <DefaultButton secondaryText="Focuses inside the FocusTrapZone" onClick={this._onButtonClickHandler} text="Go to Trap Zone" />
-
-        {(() => {
-          if (isChecked) {
-            return <FocusTrapZone>{this._internalContents()}</FocusTrapZone>;
-          } else {
-            return <div>{this._internalContents()}</div>;
-          }
-        })()}
+        {this.state.useTrapZone ? (
+          <FocusTrapZone>{this._internalContents()}</FocusTrapZone>
+        ) : (
+          // prettier-ignore
+          this._internalContents()
+        )}
       </div>
     );
   }
 
   private _internalContents() {
-    const { isChecked } = this.state;
+    const { useTrapZone } = this.state;
 
     return (
-      <div className={contentClass}>
-        <TextField label="Default TextField" placeholder="Input inside Focus Trap Zone" className="" />
-        <Link href="">Hyperlink inside FocusTrapZone</Link>
-        <br />
-        <br />
+      <Stack
+        gap={15}
+        horizontalAlign="start"
+        styles={{
+          root: { border: `2px solid ${useTrapZone ? '#ababab' : 'transparent'}`, padding: 10 }
+        }}
+      >
         <Toggle
-          componentRef={this._setRef}
-          checked={isChecked}
+          label="Use trap zone"
+          componentRef={this._toggle}
+          checked={useTrapZone}
           onChange={this._onFocusTrapZoneToggleChanged}
-          label="Focus Trap Zone"
-          onText="On"
+          onText="On (toggle to exit)"
           offText="Off"
         />
-        {(() => {
-          if (isChecked) {
-            return (
-              <DefaultButton secondaryText="Exit Focus Trap Zone" onClick={this._onExitButtonClickHandler} text="Exit Focus Trap Zone" />
-            );
-          }
-        })()}
-      </div>
+        <TextField label="Input inside trap zone" styles={{ root: { width: 300 } }} />
+        <Link href="https://bing.com">Hyperlink inside trap zone</Link>
+      </Stack>
     );
   }
 
-  private _onButtonClickHandler = (): void => {
-    this.setState({
-      isChecked: true
-    });
-  };
-
-  private _onExitButtonClickHandler = (): void => {
-    this.setState({
-      isChecked: false
+  private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
+    this.setState({ useTrapZone: !!checked }, () => {
+      // Restore focus to toggle after disabling the trap zone
+      // (the trap zone itself will handle initial focus when it's enabled)
+      if (!checked) {
+        this._toggle.current!.focus();
+      }
     });
   };
-
-  private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, isChecked: boolean): void => {
-    this.setState(
-      {
-        isChecked: isChecked
-      },
-      () => this._toggle.focus()
-    );
-  };
-
-  private _setRef = (toggle: IToggle): void => {
-    this._toggle = toggle;
-  };
 }
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx
index f9f0ee1130692..ae5a4c4bb1d82 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx
@@ -1,99 +1,70 @@
 import * as React from 'react';
 
-import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
 import { Link } from 'office-ui-fabric-react/lib/Link';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { Toggle, IToggle } from 'office-ui-fabric-react/lib/Toggle';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 
 export interface IFocusTrapZoneBoxCustomElementExampleState {
-  isChecked: boolean;
+  useTrapZone: boolean;
 }
 
+const _focusClassName = 'shouldFocusInput';
+
 export class FocusTrapZoneBoxCustomElementExample extends React.Component<{}, IFocusTrapZoneBoxCustomElementExampleState> {
   public state: IFocusTrapZoneBoxCustomElementExampleState = {
-    isChecked: false
+    useTrapZone: false
   };
 
-  private _toggle: IToggle;
-  private focusClassName = 'shouldFocusInput';
+  private _toggle = React.createRef<IToggle>();
 
   public render() {
-    const { isChecked } = this.state;
-
     return (
       <div>
-        <DefaultButton onClick={this._onButtonClickHandler} text="Go to Trap Zone" />
-        {(() => {
-          if (isChecked) {
-            return <FocusTrapZone firstFocusableSelector={this.focusClassName}>{this._internalContents()}</FocusTrapZone>;
-          } else {
-            return <div>{this._internalContents()}</div>;
-          }
-        })()}
+        {this.state.useTrapZone ? (
+          <FocusTrapZone firstFocusableSelector={_focusClassName}>{this._internalContents()}</FocusTrapZone>
+        ) : (
+          this._internalContents()
+        )}
       </div>
     );
   }
 
   private _internalContents() {
-    const { isChecked } = this.state;
+    const { useTrapZone } = this.state;
 
     return (
-      <div className="ms-FocusTrapZoneBoxExample">
-        <TextField label="Default TextField" placeholder="Input inside Focus Trap Zone" className="" />
-        <Link href="" className="">
-          Hyperlink inside FocusTrapZone
+      <Stack
+        gap={15}
+        horizontalAlign="start"
+        styles={{
+          root: { border: `2px solid ${useTrapZone ? '#ababab' : 'transparent'}`, padding: 10 }
+        }}
+      >
+        <Toggle
+          label="Use trap zone"
+          componentRef={this._toggle}
+          checked={useTrapZone}
+          onChange={this._onFocusTrapZoneToggleChanged}
+          onText="On (toggle to exit)"
+          offText="Off"
+        />
+        <TextField label="Input inside trap zone" styles={{ root: { width: 300 } }} />
+        <Link href="https://bing.com" className={_focusClassName}>
+          Hyperlink which will receive initial focus when trap zone is activated
         </Link>
-        <br />
-        <br />
-        <div>
-          <Toggle
-            componentRef={this._setRef}
-            checked={isChecked}
-            onChange={this._onFocusTrapZoneToggleChanged}
-            label="Focus Trap Zone"
-            onText="On"
-            offText="Off"
-          />
-        </div>
-        {(() => {
-          if (isChecked) {
-            return (
-              <DefaultButton
-                className={this.focusClassName}
-                secondaryText="Exit Focus Trap Zone"
-                onClick={this._onExitButtonClickHandler}
-                text="Exit Focus Trap Zone"
-              />
-            );
-          }
-        })()}
-      </div>
+      </Stack>
     );
   }
 
-  private _onButtonClickHandler = (): void => {
-    this.setState({
-      isChecked: true
-    });
-  };
-
-  private _onExitButtonClickHandler = (): void => {
-    this.setState({
-      isChecked: false
+  private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
+    this.setState({ useTrapZone: !!checked }, () => {
+      // Restore focus to toggle after disabling the trap zone
+      // (the trap zone itself will handle initial focus when it's enabled)
+      if (!checked) {
+        this._toggle.current!.focus();
+      }
     });
   };
-
-  private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, isChecked: boolean): void => {
-    this.setState(
-      {
-        isChecked: isChecked
-      },
-      () => this._toggle.focus()
-    );
-  };
-
-  private _setRef = (toggle: IToggle): void => {
-    this._toggle = toggle;
-  };
 }
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.DialogInPanel.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.DialogInPanel.Example.tsx
index b2b3e4080fd1b..c267d62079637 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.DialogInPanel.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.DialogInPanel.Example.tsx
@@ -11,19 +11,15 @@ export interface IFocusTrapZoneDialogInPanelExampleState {
 }
 
 export class FocusTrapZoneDialogInPanelExample extends React.Component<{}, IFocusTrapZoneDialogInPanelExampleState> {
-  constructor(props: {}) {
-    super(props);
-
-    this.state = {
-      hideDialog: true,
-      showPanel: false
-    };
-  }
+  public state: IFocusTrapZoneDialogInPanelExampleState = {
+    hideDialog: true,
+    showPanel: false
+  };
 
   public render() {
     return (
       <div>
-        <DefaultButton secondaryText="Opens the Sample Panel" onClick={this._onShowPanel} text="Open Panel" />
+        <DefaultButton text="Open Panel" secondaryText="Opens the Sample Panel" onClick={this._onShowPanel} />
         <Panel
           isOpen={this.state.showPanel}
           type={PanelType.smallFixedFar}
@@ -31,7 +27,7 @@ export class FocusTrapZoneDialogInPanelExample extends React.Component<{}, IFocu
           headerText="This panel makes use of FocusTrapZone. Focus should be trapped in the panel."
           closeButtonAriaLabel="Close"
         >
-          <DefaultButton secondaryText="Opens the Sample Dialog" onClick={this._showDialog} text="Open Dialog" />
+          <DefaultButton text="Open Dialog" secondaryText="Opens the Sample Dialog" onClick={this._showDialog} />
           <Dialog
             hidden={this.state.hideDialog}
             onDismiss={this._closeDialog}
@@ -48,7 +44,6 @@ export class FocusTrapZoneDialogInPanelExample extends React.Component<{}, IFocu
               styles: { main: { maxWidth: 450 } }
             }}
           >
-            {null /** You can also include null values as the result of conditionals */}
             <DialogFooter>
               <PrimaryButton onClick={this._closeDialog} text="OK" />
               <DefaultButton onClick={this._closeDialog} text="Cancel" />
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx
index 99968ba972d83..bdd651b58858e 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx
@@ -4,109 +4,75 @@ import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
 import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
 import { Toggle, IToggle } from 'office-ui-fabric-react/lib/Toggle';
-import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
-
-const contentClass = mergeStyles({
-  border: '1px dashed #ababab'
-});
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 
 export interface IFocusTrapZoneFocusZoneExampleState {
-  isChecked: boolean;
+  useTrapZone: boolean;
 }
 
 export class FocusTrapZoneFocusZoneExample extends React.Component<{}, IFocusTrapZoneFocusZoneExampleState> {
-  private _toggle: IToggle;
-
-  constructor(props: React.HTMLAttributes<HTMLDivElement>) {
-    super(props);
+  public state: IFocusTrapZoneFocusZoneExampleState = {
+    useTrapZone: false
+  };
 
-    this.state = {
-      isChecked: false
-    };
-  }
+  private _toggle = React.createRef<IToggle>();
 
   public render() {
-    const { isChecked } = this.state;
-
     return (
       <div>
-        <DefaultButton secondaryText="Focuses inside the FocusTrapZone" onClick={this._onButtonClickHandler} text="Go to Trap Zone" />
-        {(() => {
-          if (isChecked) {
-            return (
-              <FocusTrapZone forceFocusInsideTrap={true} focusPreviouslyFocusedInnerElement={true}>
-                {this._internalContents()}
-              </FocusTrapZone>
-            );
-          } else {
-            return <div>{this._internalContents()}</div>;
-          }
-        })()}
+        {this.state.useTrapZone ? (
+          <FocusTrapZone forceFocusInsideTrap={true} focusPreviouslyFocusedInnerElement={true}>
+            {this._internalContents()}
+          </FocusTrapZone>
+        ) : (
+          this._internalContents()
+        )}
       </div>
     );
   }
 
   private _internalContents() {
-    const { isChecked } = this.state;
+    const { useTrapZone } = this.state;
+    const padding = 10;
+    const border = '2px dashed #ababab';
+    const rootBorder = `2px solid ${useTrapZone ? '#ababab' : 'transparent'}`;
 
     return (
-      <div className={contentClass}>
-        <FocusZone direction={FocusZoneDirection.horizontal} data-is-visible={true}>
-          <DefaultButton text="FZ1" />
-          <DefaultButton text="FZ1" />
-          <DefaultButton text="FZ1" />
-        </FocusZone>
-        <br />
-        <DefaultButton text="No FZ" />
-        <br />
-        <br />
-        <FocusZone direction={FocusZoneDirection.horizontal} data-is-visible={true}>
-          <DefaultButton text="FZ2" />
-          <DefaultButton text="FZ2" />
-          <DefaultButton text="FZ2" />
-        </FocusZone>
-        <br />
+      <Stack gap={15} horizontalAlign="start" styles={{ root: { border: rootBorder, padding } }}>
         <Toggle
-          componentRef={this._setRef}
-          checked={isChecked}
+          label="Use trap zone"
+          componentRef={this._toggle}
+          checked={useTrapZone}
           onChange={this._onFocusTrapZoneToggleChanged}
-          label="Focus Trap Zone"
-          onText="On"
+          onText="On (toggle to exit)"
           offText="Off"
         />
-        {(() => {
-          if (isChecked) {
-            return (
-              <DefaultButton secondaryText="Exit Focus Trap Zone" onClick={this._onExitButtonClickHandler} text="Exit Focus Trap Zone" />
-            );
-          }
-        })()}
-      </div>
-    );
-  }
 
-  private _onButtonClickHandler = (): void => {
-    this.setState({
-      isChecked: true
-    });
-  };
+        <FocusZone direction={FocusZoneDirection.horizontal} data-is-visible={true}>
+          <Stack horizontal gap={10} styles={{ root: { border, padding } }}>
+            <DefaultButton text="FZ1" />
+            <DefaultButton text="FZ1" />
+            <DefaultButton text="FZ1" />
+          </Stack>
+        </FocusZone>
 
-  private _onExitButtonClickHandler = (): void => {
-    this.setState({
-      isChecked: false
-    });
-  };
+        <DefaultButton text="No FZ" />
 
-  private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, isChecked: boolean): void => {
-    this.setState(
-      {
-        isChecked: isChecked
-      },
-      () => this._toggle.focus()
+        <FocusZone direction={FocusZoneDirection.horizontal} data-is-visible={true}>
+          <Stack horizontal gap={10} styles={{ root: { border, padding } }}>
+            <DefaultButton text="FZ2" />
+            <DefaultButton text="FZ2" />
+            <DefaultButton text="FZ2" />
+          </Stack>
+        </FocusZone>
+      </Stack>
     );
-  };
+  }
 
-  private _setRef = (toggle: IToggle): void => {
-    this._toggle = toggle;
+  private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
+    this.setState({ useTrapZone: !!checked }, () => {
+      // Restore focus to toggle after re-rendering
+      this._toggle.current!.focus();
+    });
   };
 }
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx
index 02dc661c40e09..93f20ee249b87 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx
@@ -2,38 +2,41 @@ import * as React from 'react';
 
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
-import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
-
-const contentClass = mergeStyles({
-  border: '2px solid black',
-  padding: 5
-});
 
 interface IFocusTrapComponentProps {
-  name: string;
+  zoneNumber: number;
   isActive: boolean;
-  setIsActive: (name: string, isActive: boolean) => void;
-}
-
-interface IFocusTrapComponentState {
-  stateMap: { [key: string]: boolean };
+  setIsActive: (zoneNumber: number, isActive: boolean) => void;
 }
 
-class FocusTrapComponent extends React.Component<IFocusTrapComponentProps, IFocusTrapComponentState> {
+class FocusTrapComponent extends React.Component<IFocusTrapComponentProps> {
   public render() {
+    const { isActive, zoneNumber, children } = this.props;
     const contents = (
-      <div className={contentClass}>
-        <DefaultButton onClick={this._onStringButtonClicked} text={this.props.name} />
+      <Stack
+        gap={10}
+        horizontal={zoneNumber === 2}
+        horizontalAlign="start"
+        styles={{
+          root: { border: `2px solid ${isActive ? '#ababab' : 'transparent'}`, padding: 10 }
+        }}
+      >
         <Toggle
-          defaultChecked={this.props.isActive}
+          defaultChecked={isActive}
           onChange={this._onFocusTrapZoneToggleChanged}
-          label="Focus Trap Zone"
-          onText="On"
+          label={'Enable trap zone ' + zoneNumber}
+          onText="On (toggle to exit)"
           offText="Off"
+          styles={{
+            // Set a width on these toggles in the horizontal zone to prevent jumping when enabled
+            root: zoneNumber >= 2 && zoneNumber <= 4 && { width: 200 }
+          }}
         />
-        {this.props.children}
-      </div>
+        <DefaultButton onClick={this._onStringButtonClicked} text={`Zone ${zoneNumber} button`} />
+        {children}
+      </Stack>
     );
 
     if (this.props.isActive) {
@@ -43,51 +46,51 @@ class FocusTrapComponent extends React.Component<IFocusTrapComponentProps, IFocu
   }
 
   private _onStringButtonClicked = (): void => {
-    console.log(this.props.name);
+    alert(`Button ${this.props.zoneNumber} clicked`);
   };
 
   private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, isChecked: boolean): void => {
-    this.props.setIsActive(this.props.name, isChecked);
+    this.props.setIsActive(this.props.zoneNumber, isChecked);
   };
 }
 
 export interface IFocusTrapZoneNestedExampleState {
-  stateMap: { One?: boolean; Two?: boolean; Three?: boolean; Four?: boolean; Five?: boolean };
+  activeStates: { [key: number]: boolean };
 }
 
-type Name = keyof IFocusTrapZoneNestedExampleState['stateMap'];
-const NAMES: Name[] = ['One', 'Two', 'Three', 'Four', 'Five'];
-
 export class FocusTrapZoneNestedExample extends React.Component<{}, IFocusTrapZoneNestedExampleState> {
-  public state: IFocusTrapZoneNestedExampleState = { stateMap: {} };
+  public state: IFocusTrapZoneNestedExampleState = { activeStates: {} };
 
   public render() {
-    const { stateMap } = this.state;
+    const { activeStates } = this.state;
 
     return (
       <div>
-        <FocusTrapComponent name="One" isActive={!!stateMap.One} setIsActive={this._setIsActive}>
-          <FocusTrapComponent name="Two" isActive={!!stateMap.Two} setIsActive={this._setIsActive}>
-            <FocusTrapComponent name="Three" isActive={!!stateMap.Three} setIsActive={this._setIsActive} />
-            <FocusTrapComponent name="Four" isActive={!!stateMap.Four} setIsActive={this._setIsActive} />
+        <DefaultButton onClick={this._randomize} styles={{ root: { marginBottom: 10 } }}>
+          Randomize
+        </DefaultButton>
+
+        <FocusTrapComponent zoneNumber={1} isActive={!!activeStates[1]} setIsActive={this._setIsActive}>
+          <FocusTrapComponent zoneNumber={2} isActive={!!activeStates[2]} setIsActive={this._setIsActive}>
+            <FocusTrapComponent zoneNumber={3} isActive={!!activeStates[3]} setIsActive={this._setIsActive} />
+            <FocusTrapComponent zoneNumber={4} isActive={!!activeStates[4]} setIsActive={this._setIsActive} />
           </FocusTrapComponent>
-          <FocusTrapComponent name="Five" isActive={!!stateMap.Five} setIsActive={this._setIsActive} />
+          <FocusTrapComponent zoneNumber={5} isActive={!!activeStates[5]} setIsActive={this._setIsActive} />
         </FocusTrapComponent>
-        <DefaultButton onClick={this._randomize}>Randomize</DefaultButton>
       </div>
     );
   }
 
-  private _setIsActive = (name: Name, isActive: boolean): void => {
-    this.state.stateMap[name] = isActive;
-    this.forceUpdate();
+  private _setIsActive = (zoneNumber: number, isActive: boolean): void => {
+    const { activeStates } = this.state;
+    this.setState({ activeStates: { ...activeStates, [zoneNumber]: isActive } });
   };
 
   private _randomize = (): void => {
-    NAMES.forEach(name => {
-      this.state.stateMap[name] = Math.random() >= 0.5;
+    const activeStates: IFocusTrapZoneNestedExampleState['activeStates'] = {};
+    [1, 2, 3, 4, 5].forEach(zoneNumber => {
+      activeStates[zoneNumber] = Math.random() >= 0.5;
     });
-
-    this.forceUpdate();
+    this.setState({ activeStates });
   };
 }
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.NoTabbable.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.NoTabbable.Example.tsx
index e136ebb56c1eb..98b77b39c12fe 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.NoTabbable.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.NoTabbable.Example.tsx
@@ -4,97 +4,64 @@ import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { Toggle, IToggle } from 'office-ui-fabric-react/lib/Toggle';
-import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
-
-const contentClass = mergeStyles({
-  border: '1px dashed #ababab'
-});
+import { Stack } from 'office-ui-fabric-react/lib/Stack';
 
 export interface IFocusTrapZoneNoTabbableExampleState {
-  isChecked: boolean;
+  useTrapZone: boolean;
 }
 
 export class FocusTrapZoneNoTabbableExample extends React.Component<{}, IFocusTrapZoneNoTabbableExampleState> {
-  public state: IFocusTrapZoneNoTabbableExampleState = { isChecked: false };
+  public state: IFocusTrapZoneNoTabbableExampleState = { useTrapZone: false };
 
-  private _toggle: IToggle;
+  private _toggle = React.createRef<IToggle>();
 
   public render() {
-    const { isChecked } = this.state;
-
     return (
       <div>
-        <DefaultButton secondaryText="Focuses inside the FocusTrapZone" onClick={this._onButtonClickHandler} text="Go to Trap Zone" />
-        {(() => {
-          if (isChecked) {
-            return (
-              <FocusTrapZone forceFocusInsideTrap={true} focusPreviouslyFocusedInnerElement={true}>
-                {this._internalContents()}
-              </FocusTrapZone>
-            );
-          } else {
-            return <div>{this._internalContents()}</div>;
-          }
-        })()}
+        {this.state.useTrapZone ? (
+          <FocusTrapZone forceFocusInsideTrap={true} focusPreviouslyFocusedInnerElement={true}>
+            {this._internalContents()}
+          </FocusTrapZone>
+        ) : (
+          this._internalContents()
+        )}
       </div>
     );
   }
 
   private _internalContents() {
-    const { isChecked } = this.state;
+    const { useTrapZone } = this.state;
 
     return (
-      <div className={contentClass}>
-        <TextField placeholder="Not tabbable" tabIndex={-1} />
-        <TextField placeholder="Not tabbable" tabIndex={-1} />
-        <TextField placeholder="Not tabbable" tabIndex={-1} />
+      <Stack
+        gap={15}
+        horizontalAlign="start"
+        styles={{
+          root: { border: `2px solid ${useTrapZone ? '#ababab' : 'transparent'}`, padding: 10 }
+        }}
+      >
         <Toggle
-          componentRef={this._setRef}
-          checked={isChecked}
+          label="Use trap zone"
+          componentRef={this._toggle}
+          checked={useTrapZone}
           onChange={this._onFocusTrapZoneToggleChanged}
-          label="Focus Trap Zone"
-          onText="On"
+          onText="On (toggle to exit)"
           offText="Off"
-          tabIndex={-1}
         />
-        {(() => {
-          if (isChecked) {
-            return (
-              <DefaultButton
-                secondaryText="Exit Focus Trap Zone"
-                onClick={this._onExitButtonClickHandler}
-                text="Exit Focus Trap Zone"
-                tabIndex={-1}
-              />
-            );
-          }
-        })()}
-      </div>
+        <TextField placeholder="Not tabbable" tabIndex={-1} />
+        <TextField placeholder="Not tabbable" tabIndex={-1} />
+        <TextField placeholder="Not tabbable" tabIndex={-1} />
+      </Stack>
     );
   }
 
-  private _onButtonClickHandler = (): void => {
-    this.setState({
-      isChecked: true
+  private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
+    this.setState({ useTrapZone: !!checked }, () => {
+      // Restore focus to toggle after disabling the trap zone
+      // (the trap zone itself will handle initial focus when it's enabled)
+      if (!checked) {
+        this._toggle.current!.focus();
+      }
     });
   };
-
-  private _onExitButtonClickHandler = (): void => {
-    this.setState({
-      isChecked: false
-    });
-  };
-
-  private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent<HTMLElement>, isChecked: boolean): void => {
-    this.setState(
-      {
-        isChecked: isChecked
-      },
-      () => this._toggle.focus()
-    );
-  };
-
-  private _setRef = (toggle: IToggle): void => {
-    this._toggle = toggle;
-  };
 }
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Click.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Click.Example.tsx.shot
index 6b06e99b85a77..fdc86a33de92d 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Click.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Click.Example.tsx.shot
@@ -2,138 +2,57 @@
 
 exports[`Component Examples renders FocusTrapZone.Box.Click.Example.tsx correctly 1`] = `
 <div>
-  <button
-    aria-describedby="id__1"
-    aria-labelledby="id__0"
+  <div
     className=
-        ms-Button
-        ms-Button--default
+        ms-Stack
         {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          background-color: #f4f4f4;
-          border-radius: 0px;
-          border: 1px solid transparent;
+          align-items: flex-start;
+          border: 2px dashed transparent;
           box-sizing: border-box;
-          color: #333333;
-          cursor: pointer;
-          display: inline-block;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: 32px;
-          min-width: 80px;
-          outline: transparent;
-          padding-bottom: 0;
-          padding-left: 16px;
-          padding-right: 16px;
-          padding-top: 0;
-          position: relative;
-          text-align: center;
-          text-decoration: none;
-          user-select: none;
-          vertical-align: top;
+          display: flex;
+          flex-direction: column;
+          flex-wrap: nowrap;
+          height: auto;
+          padding-bottom: 10px;
+          padding-left: 10px;
+          padding-right: 10px;
+          padding-top: 10px;
+          width: auto;
         }
-        &::-moz-focus-inner {
-          border: 0;
+        & > * {
+          text-overflow: ellipsis;
         }
-        .ms-Fabric--isFocusVisible &:focus:after {
-          border: 1px solid #ffffff;
-          bottom: 0px;
-          content: "";
-          left: 0px;
-          outline: 1px solid #666666;
-          position: absolute;
-          right: 0px;
-          top: 0px;
-          z-index: 1;
+        & > *:not(:first-child) {
+          margin-top: 15px;
         }
-        @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-          border: none;
-          bottom: -2px;
-          left: -2px;
-          outline-color: ButtonText;
-          right: -2px;
-          top: -2px;
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 1;
         }
-        &:active > * {
-          left: 0px;
-          position: relative;
-          top: 0px;
-        }
-        &:hover {
-          background-color: #eaeaea;
-          color: #212121;
-        }
-        @media screen and (-ms-high-contrast: active){&:hover {
-          border-color: Highlight;
-          color: Highlight;
-        }
-        &:active {
-          background-color: #c8c8c8;
-          color: #212121;
-        }
-    data-is-focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyPress={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    onMouseUp={[Function]}
-    type="button"
   >
     <div
       className=
-          ms-Button-flexContainer
+          ms-Toggle
+          is-enabled
           {
-            align-items: center;
-            display: flex;
-            flex-wrap: nowrap;
-            height: 100%;
-            justify-content: center;
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            margin-bottom: 8px;
           }
     >
-      <div
+      <label
         className=
-            ms-Button-textContainer
-            {
-              flex-grow: 1;
-            }
-      >
-        <div
-          className=
-              ms-Button-label
-              {
-                font-weight: 600;
-                line-height: 100%;
-                margin-bottom: 0;
-                margin-left: 4px;
-                margin-right: 4px;
-                margin-top: 0;
-              }
-          id="id__0"
-        >
-          Go to Trap Zone
-        </div>
-      </div>
-    </div>
-  </button>
-  <div>
-    <div
-      className=
-
-          {
-            border: 1px dashed #ababab;
-          }
-    >
-      <div
-        className=
-            ms-TextField
+            ms-Label
+            ms-Toggle-label
             {
               -moz-osx-font-smoothing: grayscale;
               -webkit-font-smoothing: antialiased;
               box-shadow: none;
               box-sizing: border-box;
+              color: #333333;
+              display: block;
               font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
               font-size: 14px;
               font-weight: 400;
@@ -141,220 +60,169 @@ exports[`Component Examples renders FocusTrapZone.Box.Click.Example.tsx correctl
               margin-left: 0px;
               margin-right: 0px;
               margin-top: 0px;
-              padding-bottom: 0px;
-              padding-left: 0px;
-              padding-right: 0px;
-              padding-top: 0px;
+              overflow-wrap: break-word;
+              padding-bottom: 5px;
+              padding-left: 0;
+              padding-right: 0;
+              padding-top: 5px;
+              word-wrap: break-word;
+            }
+        htmlFor="Toggle0"
+      >
+        Use trap zone
+      </label>
+      <div
+        className=
+            ms-Toggle-innerContainer
+            {
+              display: inline-flex;
               position: relative;
             }
       >
-        <div
+        <button
+          aria-checked={false}
+          checked={false}
           className=
-              ms-TextField-wrapper
-
+              ms-Toggle-background
+              {
+                align-items: center;
+                background: #ffffff;
+                border-color: #666666;
+                border-radius: 1em;
+                border-style: solid;
+                border-width: 1px;
+                box-sizing: border-box;
+                cursor: pointer;
+                display: flex;
+                font-size: 20px;
+                height: 1em;
+                outline: transparent;
+                padding-bottom: 0;
+                padding-left: .2em;
+                padding-right: .2em;
+                padding-top: 0;
+                position: relative;
+                transition: all 0.1s ease;
+                width: 2.2em;
+              }
+              &::-moz-focus-inner {
+                border: 0;
+              }
+              .ms-Fabric--isFocusVisible &:focus:after {
+                border: 1px solid #ffffff;
+                bottom: -2px;
+                content: "";
+                left: -2px;
+                outline: 1px solid #666666;
+                position: absolute;
+                right: -2px;
+                top: -2px;
+                z-index: 1;
+              }
+              &:hover {
+                border-color: #333333;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
+                border-color: Highlight;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover {
+                border-color: Highlight;
+              }
+          data-is-focusable={true}
+          id="Toggle0"
+          onChange={[Function]}
+          onClick={[Function]}
+          role="switch"
+          type="button"
         >
-          <label
-            className=
-                ms-Label
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  box-shadow: none;
-                  box-sizing: border-box;
-                  color: #333333;
-                  display: block;
-                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                  font-size: 14px;
-                  font-weight: 400;
-                  margin-bottom: 0px;
-                  margin-left: 0px;
-                  margin-right: 0px;
-                  margin-top: 0px;
-                  overflow-wrap: break-word;
-                  padding-bottom: 5px;
-                  padding-left: 0;
-                  padding-right: 0;
-                  padding-top: 5px;
-                  word-wrap: break-word;
-                }
-            htmlFor="TextField3"
-          >
-            Default TextField
-          </label>
           <div
             className=
-                ms-TextField-fieldGroup
+                ms-Toggle-thumb
                 {
-                  align-items: stretch;
-                  background: #ffffff;
-                  border: 1px solid #a6a6a6;
-                  box-shadow: none;
+                  background-color: #333333;
+                  border-color: transparent;
+                  border-radius: .5em;
+                  border-style: solid;
+                  border-width: .28em;
                   box-sizing: border-box;
-                  cursor: text;
-                  display: flex;
-                  flex-direction: row;
-                  height: 32px;
-                  margin-bottom: 0px;
-                  margin-left: 0px;
-                  margin-right: 0px;
-                  margin-top: 0px;
-                  padding-bottom: 0px;
-                  padding-left: 0px;
-                  padding-right: 0px;
-                  padding-top: 0px;
-                  position: relative;
-                }
-                &:hover {
-                  border-color: #333333;
-                }
-                @media screen and (-ms-high-contrast: active){&:hover {
-                  border-color: Highlight;
+                  height: .5em;
+                  transition: all 0.1s ease;
+                  width: .5em;
                 }
-          >
-            <input
-              aria-invalid={false}
-              className=
-                  ms-TextField-field
-                  {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    background-color: transparent;
-                    background: none;
-                    border-radius: 0px;
-                    border: none;
-                    box-shadow: none;
-                    box-sizing: border-box;
-                    color: #333333;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    margin-bottom: 0px;
-                    margin-left: 0px;
-                    margin-right: 0px;
-                    margin-top: 0px;
-                    min-width: 0px;
-                    outline: 0px;
-                    padding-bottom: 0;
-                    padding-left: 12px;
-                    padding-right: 12px;
-                    padding-top: 0;
-                    text-overflow: ellipsis;
-                    width: 100%;
-                  }
-                  &:active, &:focus, &:hover {
-                    outline: 0px;
-                  }
-                  &::-ms-clear {
-                    display: none;
-                  }
-                  &::placeholder {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #666666;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    opacity: 1;
-                  }
-                  &:-ms-input-placeholder {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #666666;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    opacity: 1;
-                  }
-              id="TextField3"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              onInput={[Function]}
-              placeholder="Input inside Focus Trap Zone"
-              type="text"
-              value=""
-            />
-          </div>
-        </div>
+          />
+        </button>
+        <label
+          className=
+              ms-Label
+              ms-Toggle-stateText
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                display: block;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow-wrap: break-word;
+                padding-bottom: 5px;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 5px;
+                word-wrap: break-word;
+              }
+              && {
+                margin-bottom: 0;
+                margin-left: 8px;
+                margin-right: 8px;
+                margin-top: 0;
+                padding-bottom: 0;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 0;
+                user-select: none;
+              }
+        >
+          Off
+        </label>
       </div>
-      <button
-        className=
-            ms-Link
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              background-color: transparent;
-              background: none;
-              border-bottom: 1px solid transparent;
-              border: none;
-              color: #0078d4;
-              cursor: pointer;
-              display: inline;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: inherit;
-              font-weight: inherit;
-              margin-bottom: 0px;
-              margin-left: 0px;
-              margin-right: 0px;
-              margin-top: 0px;
-              outline: none;
-              overflow: inherit;
-              padding-bottom: 0px;
-              padding-left: 0px;
-              padding-right: 0px;
-              padding-top: 0px;
-              text-align: left;
-              text-overflow: inherit;
-              user-select: text;
-            }
-            .ms-Fabric--isFocusVisible &:focus {
-              box-shadow: 0 0 0 1px #666666 inset;
-            }
-            @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus {
-              outline: 1px solid WindowText;
-            }
-            @media screen and (-ms-high-contrast: active){& {
-              border-bottom: none;
-            }
-            @media screen and (-ms-high-contrast: white-on-black){& {
-              color: #FFFF00;
-            }
-            @media screen and (-ms-high-contrast: black-on-white){& {
-              color: #00009F;
-            }
-            &:active, &:hover, &:active:hover {
-              color: #004578;
-            }
-            @media screen and (-ms-high-contrast: active){&:active, &:hover, &:active:hover {
-              text-decoration: underline;
-            }
-            &:focus {
-              color: #0078d4;
-            }
-        onClick={[Function]}
-        type="button"
-      >
-        Hyperlink inside FocusTrapZone
-      </button>
-      <br />
-      <br />
+    </div>
+    <div
+      className=
+          ms-TextField
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            box-shadow: none;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            margin-bottom: 0px;
+            margin-left: 0px;
+            margin-right: 0px;
+            margin-top: 0px;
+            padding-bottom: 0px;
+            padding-left: 0px;
+            padding-right: 0px;
+            padding-top: 0px;
+            position: relative;
+            width: 300px;
+          }
+    >
       <div
         className=
-            ms-Toggle
-            is-enabled
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              margin-bottom: 8px;
-            }
+            ms-TextField-wrapper
+
       >
         <label
           className=
               ms-Label
-              ms-Toggle-label
               {
                 -moz-osx-font-smoothing: grayscale;
                 -webkit-font-smoothing: antialiased;
@@ -376,101 +244,54 @@ exports[`Component Examples renders FocusTrapZone.Box.Click.Example.tsx correctl
                 padding-top: 5px;
                 word-wrap: break-word;
               }
-          htmlFor="Toggle5"
+          htmlFor="TextField1"
         >
-          Focus Trap Zone
+          Input inside trap zone
         </label>
         <div
           className=
-              ms-Toggle-innerContainer
+              ms-TextField-fieldGroup
               {
-                display: inline-flex;
+                align-items: stretch;
+                background: #ffffff;
+                border: 1px solid #a6a6a6;
+                box-shadow: none;
+                box-sizing: border-box;
+                cursor: text;
+                display: flex;
+                flex-direction: row;
+                height: 32px;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
                 position: relative;
               }
+              &:hover {
+                border-color: #333333;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover {
+                border-color: Highlight;
+              }
         >
-          <button
-            aria-checked={false}
-            checked={false}
-            className=
-                ms-Toggle-background
-                {
-                  align-items: center;
-                  background: #ffffff;
-                  border-color: #666666;
-                  border-radius: 1em;
-                  border-style: solid;
-                  border-width: 1px;
-                  box-sizing: border-box;
-                  cursor: pointer;
-                  display: flex;
-                  font-size: 20px;
-                  height: 1em;
-                  outline: transparent;
-                  padding-bottom: 0;
-                  padding-left: .2em;
-                  padding-right: .2em;
-                  padding-top: 0;
-                  position: relative;
-                  transition: all 0.1s ease;
-                  width: 2.2em;
-                }
-                &::-moz-focus-inner {
-                  border: 0;
-                }
-                .ms-Fabric--isFocusVisible &:focus:after {
-                  border: 1px solid #ffffff;
-                  bottom: -2px;
-                  content: "";
-                  left: -2px;
-                  outline: 1px solid #666666;
-                  position: absolute;
-                  right: -2px;
-                  top: -2px;
-                  z-index: 1;
-                }
-                &:hover {
-                  border-color: #333333;
-                }
-                @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
-                  border-color: Highlight;
-                }
-                @media screen and (-ms-high-contrast: active){&:hover {
-                  border-color: Highlight;
-                }
-            data-is-focusable={true}
-            id="Toggle5"
-            onChange={[Function]}
-            onClick={[Function]}
-            role="switch"
-            type="button"
-          >
-            <div
-              className=
-                  ms-Toggle-thumb
-                  {
-                    background-color: #333333;
-                    border-color: transparent;
-                    border-radius: .5em;
-                    border-style: solid;
-                    border-width: .28em;
-                    box-sizing: border-box;
-                    height: .5em;
-                    transition: all 0.1s ease;
-                    width: .5em;
-                  }
-            />
-          </button>
-          <label
+          <input
+            aria-invalid={false}
             className=
-                ms-Label
-                ms-Toggle-stateText
+                ms-TextField-field
                 {
                   -moz-osx-font-smoothing: grayscale;
                   -webkit-font-smoothing: antialiased;
+                  background-color: transparent;
+                  background: none;
+                  border-radius: 0px;
+                  border: none;
                   box-shadow: none;
                   box-sizing: border-box;
                   color: #333333;
-                  display: block;
                   font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
@@ -478,30 +299,86 @@ exports[`Component Examples renders FocusTrapZone.Box.Click.Example.tsx correctl
                   margin-left: 0px;
                   margin-right: 0px;
                   margin-top: 0px;
-                  overflow-wrap: break-word;
-                  padding-bottom: 5px;
-                  padding-left: 0;
-                  padding-right: 0;
-                  padding-top: 5px;
-                  word-wrap: break-word;
-                }
-                && {
-                  margin-bottom: 0;
-                  margin-left: 8px;
-                  margin-right: 8px;
-                  margin-top: 0;
+                  min-width: 0px;
+                  outline: 0px;
                   padding-bottom: 0;
-                  padding-left: 0;
-                  padding-right: 0;
+                  padding-left: 12px;
+                  padding-right: 12px;
                   padding-top: 0;
-                  user-select: none;
+                  text-overflow: ellipsis;
+                  width: 100%;
+                }
+                &:active, &:focus, &:hover {
+                  outline: 0px;
+                }
+                &::-ms-clear {
+                  display: none;
+                }
+                &::placeholder {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  color: #666666;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  opacity: 1;
+                }
+                &:-ms-input-placeholder {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  color: #666666;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  opacity: 1;
                 }
-          >
-            Off
-          </label>
+            id="TextField1"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onInput={[Function]}
+            type="text"
+            value=""
+          />
         </div>
       </div>
     </div>
+    <a
+      className=
+          ms-Link
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            color: #0078d4;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: inherit;
+            font-weight: inherit;
+            outline: none;
+            text-decoration: none;
+          }
+          .ms-Fabric--isFocusVisible &:focus {
+            box-shadow: 0 0 0 1px #666666 inset;
+          }
+          @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus {
+            outline: 1px solid WindowText;
+          }
+          @media screen and (-ms-high-contrast: active){& {
+            border-bottom: none;
+          }
+          &:active, &:hover, &:active:hover {
+            color: #004578;
+          }
+          @media screen and (-ms-high-contrast: active){&:active, &:hover, &:active:hover {
+            text-decoration: underline;
+          }
+          &:focus {
+            color: #0078d4;
+          }
+      href="https://bing.com"
+      onClick={[Function]}
+    >
+      Hyperlink inside trap zone
+    </a>
   </div>
 </div>
 `;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Example.tsx.shot
index 839e632e85cbf..ab08e95412e1e 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Example.tsx.shot
@@ -2,138 +2,57 @@
 
 exports[`Component Examples renders FocusTrapZone.Box.Example.tsx correctly 1`] = `
 <div>
-  <button
-    aria-describedby="id__1"
-    aria-labelledby="id__0"
+  <div
     className=
-        ms-Button
-        ms-Button--default
+        ms-Stack
         {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          background-color: #f4f4f4;
-          border-radius: 0px;
-          border: 1px solid transparent;
+          align-items: flex-start;
+          border: 2px solid transparent;
           box-sizing: border-box;
-          color: #333333;
-          cursor: pointer;
-          display: inline-block;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: 32px;
-          min-width: 80px;
-          outline: transparent;
-          padding-bottom: 0;
-          padding-left: 16px;
-          padding-right: 16px;
-          padding-top: 0;
-          position: relative;
-          text-align: center;
-          text-decoration: none;
-          user-select: none;
-          vertical-align: top;
+          display: flex;
+          flex-direction: column;
+          flex-wrap: nowrap;
+          height: auto;
+          padding-bottom: 10px;
+          padding-left: 10px;
+          padding-right: 10px;
+          padding-top: 10px;
+          width: auto;
         }
-        &::-moz-focus-inner {
-          border: 0;
+        & > * {
+          text-overflow: ellipsis;
         }
-        .ms-Fabric--isFocusVisible &:focus:after {
-          border: 1px solid #ffffff;
-          bottom: 0px;
-          content: "";
-          left: 0px;
-          outline: 1px solid #666666;
-          position: absolute;
-          right: 0px;
-          top: 0px;
-          z-index: 1;
+        & > *:not(:first-child) {
+          margin-top: 15px;
         }
-        @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-          border: none;
-          bottom: -2px;
-          left: -2px;
-          outline-color: ButtonText;
-          right: -2px;
-          top: -2px;
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 1;
         }
-        &:active > * {
-          left: 0px;
-          position: relative;
-          top: 0px;
-        }
-        &:hover {
-          background-color: #eaeaea;
-          color: #212121;
-        }
-        @media screen and (-ms-high-contrast: active){&:hover {
-          border-color: Highlight;
-          color: Highlight;
-        }
-        &:active {
-          background-color: #c8c8c8;
-          color: #212121;
-        }
-    data-is-focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyPress={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    onMouseUp={[Function]}
-    type="button"
   >
     <div
       className=
-          ms-Button-flexContainer
+          ms-Toggle
+          is-enabled
           {
-            align-items: center;
-            display: flex;
-            flex-wrap: nowrap;
-            height: 100%;
-            justify-content: center;
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            margin-bottom: 8px;
           }
     >
-      <div
+      <label
         className=
-            ms-Button-textContainer
-            {
-              flex-grow: 1;
-            }
-      >
-        <div
-          className=
-              ms-Button-label
-              {
-                font-weight: 600;
-                line-height: 100%;
-                margin-bottom: 0;
-                margin-left: 4px;
-                margin-right: 4px;
-                margin-top: 0;
-              }
-          id="id__0"
-        >
-          Go to Trap Zone
-        </div>
-      </div>
-    </div>
-  </button>
-  <div>
-    <div
-      className=
-
-          {
-            border: 1px dashed #ababab;
-          }
-    >
-      <div
-        className=
-            ms-TextField
+            ms-Label
+            ms-Toggle-label
             {
               -moz-osx-font-smoothing: grayscale;
               -webkit-font-smoothing: antialiased;
               box-shadow: none;
               box-sizing: border-box;
+              color: #333333;
+              display: block;
               font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
               font-size: 14px;
               font-weight: 400;
@@ -141,220 +60,169 @@ exports[`Component Examples renders FocusTrapZone.Box.Example.tsx correctly 1`]
               margin-left: 0px;
               margin-right: 0px;
               margin-top: 0px;
-              padding-bottom: 0px;
-              padding-left: 0px;
-              padding-right: 0px;
-              padding-top: 0px;
+              overflow-wrap: break-word;
+              padding-bottom: 5px;
+              padding-left: 0;
+              padding-right: 0;
+              padding-top: 5px;
+              word-wrap: break-word;
+            }
+        htmlFor="Toggle0"
+      >
+        Use trap zone
+      </label>
+      <div
+        className=
+            ms-Toggle-innerContainer
+            {
+              display: inline-flex;
               position: relative;
             }
       >
-        <div
+        <button
+          aria-checked={false}
+          checked={false}
           className=
-              ms-TextField-wrapper
-
+              ms-Toggle-background
+              {
+                align-items: center;
+                background: #ffffff;
+                border-color: #666666;
+                border-radius: 1em;
+                border-style: solid;
+                border-width: 1px;
+                box-sizing: border-box;
+                cursor: pointer;
+                display: flex;
+                font-size: 20px;
+                height: 1em;
+                outline: transparent;
+                padding-bottom: 0;
+                padding-left: .2em;
+                padding-right: .2em;
+                padding-top: 0;
+                position: relative;
+                transition: all 0.1s ease;
+                width: 2.2em;
+              }
+              &::-moz-focus-inner {
+                border: 0;
+              }
+              .ms-Fabric--isFocusVisible &:focus:after {
+                border: 1px solid #ffffff;
+                bottom: -2px;
+                content: "";
+                left: -2px;
+                outline: 1px solid #666666;
+                position: absolute;
+                right: -2px;
+                top: -2px;
+                z-index: 1;
+              }
+              &:hover {
+                border-color: #333333;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
+                border-color: Highlight;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover {
+                border-color: Highlight;
+              }
+          data-is-focusable={true}
+          id="Toggle0"
+          onChange={[Function]}
+          onClick={[Function]}
+          role="switch"
+          type="button"
         >
-          <label
-            className=
-                ms-Label
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  box-shadow: none;
-                  box-sizing: border-box;
-                  color: #333333;
-                  display: block;
-                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                  font-size: 14px;
-                  font-weight: 400;
-                  margin-bottom: 0px;
-                  margin-left: 0px;
-                  margin-right: 0px;
-                  margin-top: 0px;
-                  overflow-wrap: break-word;
-                  padding-bottom: 5px;
-                  padding-left: 0;
-                  padding-right: 0;
-                  padding-top: 5px;
-                  word-wrap: break-word;
-                }
-            htmlFor="TextField3"
-          >
-            Default TextField
-          </label>
           <div
             className=
-                ms-TextField-fieldGroup
+                ms-Toggle-thumb
                 {
-                  align-items: stretch;
-                  background: #ffffff;
-                  border: 1px solid #a6a6a6;
-                  box-shadow: none;
+                  background-color: #333333;
+                  border-color: transparent;
+                  border-radius: .5em;
+                  border-style: solid;
+                  border-width: .28em;
                   box-sizing: border-box;
-                  cursor: text;
-                  display: flex;
-                  flex-direction: row;
-                  height: 32px;
-                  margin-bottom: 0px;
-                  margin-left: 0px;
-                  margin-right: 0px;
-                  margin-top: 0px;
-                  padding-bottom: 0px;
-                  padding-left: 0px;
-                  padding-right: 0px;
-                  padding-top: 0px;
-                  position: relative;
-                }
-                &:hover {
-                  border-color: #333333;
-                }
-                @media screen and (-ms-high-contrast: active){&:hover {
-                  border-color: Highlight;
+                  height: .5em;
+                  transition: all 0.1s ease;
+                  width: .5em;
                 }
-          >
-            <input
-              aria-invalid={false}
-              className=
-                  ms-TextField-field
-                  {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    background-color: transparent;
-                    background: none;
-                    border-radius: 0px;
-                    border: none;
-                    box-shadow: none;
-                    box-sizing: border-box;
-                    color: #333333;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    margin-bottom: 0px;
-                    margin-left: 0px;
-                    margin-right: 0px;
-                    margin-top: 0px;
-                    min-width: 0px;
-                    outline: 0px;
-                    padding-bottom: 0;
-                    padding-left: 12px;
-                    padding-right: 12px;
-                    padding-top: 0;
-                    text-overflow: ellipsis;
-                    width: 100%;
-                  }
-                  &:active, &:focus, &:hover {
-                    outline: 0px;
-                  }
-                  &::-ms-clear {
-                    display: none;
-                  }
-                  &::placeholder {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #666666;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    opacity: 1;
-                  }
-                  &:-ms-input-placeholder {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #666666;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    opacity: 1;
-                  }
-              id="TextField3"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              onInput={[Function]}
-              placeholder="Input inside Focus Trap Zone"
-              type="text"
-              value=""
-            />
-          </div>
-        </div>
+          />
+        </button>
+        <label
+          className=
+              ms-Label
+              ms-Toggle-stateText
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                display: block;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow-wrap: break-word;
+                padding-bottom: 5px;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 5px;
+                word-wrap: break-word;
+              }
+              && {
+                margin-bottom: 0;
+                margin-left: 8px;
+                margin-right: 8px;
+                margin-top: 0;
+                padding-bottom: 0;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 0;
+                user-select: none;
+              }
+        >
+          Off
+        </label>
       </div>
-      <button
-        className=
-            ms-Link
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              background-color: transparent;
-              background: none;
-              border-bottom: 1px solid transparent;
-              border: none;
-              color: #0078d4;
-              cursor: pointer;
-              display: inline;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: inherit;
-              font-weight: inherit;
-              margin-bottom: 0px;
-              margin-left: 0px;
-              margin-right: 0px;
-              margin-top: 0px;
-              outline: none;
-              overflow: inherit;
-              padding-bottom: 0px;
-              padding-left: 0px;
-              padding-right: 0px;
-              padding-top: 0px;
-              text-align: left;
-              text-overflow: inherit;
-              user-select: text;
-            }
-            .ms-Fabric--isFocusVisible &:focus {
-              box-shadow: 0 0 0 1px #666666 inset;
-            }
-            @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus {
-              outline: 1px solid WindowText;
-            }
-            @media screen and (-ms-high-contrast: active){& {
-              border-bottom: none;
-            }
-            @media screen and (-ms-high-contrast: white-on-black){& {
-              color: #FFFF00;
-            }
-            @media screen and (-ms-high-contrast: black-on-white){& {
-              color: #00009F;
-            }
-            &:active, &:hover, &:active:hover {
-              color: #004578;
-            }
-            @media screen and (-ms-high-contrast: active){&:active, &:hover, &:active:hover {
-              text-decoration: underline;
-            }
-            &:focus {
-              color: #0078d4;
-            }
-        onClick={[Function]}
-        type="button"
-      >
-        Hyperlink inside FocusTrapZone
-      </button>
-      <br />
-      <br />
+    </div>
+    <div
+      className=
+          ms-TextField
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            box-shadow: none;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            margin-bottom: 0px;
+            margin-left: 0px;
+            margin-right: 0px;
+            margin-top: 0px;
+            padding-bottom: 0px;
+            padding-left: 0px;
+            padding-right: 0px;
+            padding-top: 0px;
+            position: relative;
+            width: 300px;
+          }
+    >
       <div
         className=
-            ms-Toggle
-            is-enabled
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              margin-bottom: 8px;
-            }
+            ms-TextField-wrapper
+
       >
         <label
           className=
               ms-Label
-              ms-Toggle-label
               {
                 -moz-osx-font-smoothing: grayscale;
                 -webkit-font-smoothing: antialiased;
@@ -376,101 +244,54 @@ exports[`Component Examples renders FocusTrapZone.Box.Example.tsx correctly 1`]
                 padding-top: 5px;
                 word-wrap: break-word;
               }
-          htmlFor="Toggle5"
+          htmlFor="TextField1"
         >
-          Focus Trap Zone
+          Input inside trap zone
         </label>
         <div
           className=
-              ms-Toggle-innerContainer
+              ms-TextField-fieldGroup
               {
-                display: inline-flex;
+                align-items: stretch;
+                background: #ffffff;
+                border: 1px solid #a6a6a6;
+                box-shadow: none;
+                box-sizing: border-box;
+                cursor: text;
+                display: flex;
+                flex-direction: row;
+                height: 32px;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
                 position: relative;
               }
+              &:hover {
+                border-color: #333333;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover {
+                border-color: Highlight;
+              }
         >
-          <button
-            aria-checked={false}
-            checked={false}
-            className=
-                ms-Toggle-background
-                {
-                  align-items: center;
-                  background: #ffffff;
-                  border-color: #666666;
-                  border-radius: 1em;
-                  border-style: solid;
-                  border-width: 1px;
-                  box-sizing: border-box;
-                  cursor: pointer;
-                  display: flex;
-                  font-size: 20px;
-                  height: 1em;
-                  outline: transparent;
-                  padding-bottom: 0;
-                  padding-left: .2em;
-                  padding-right: .2em;
-                  padding-top: 0;
-                  position: relative;
-                  transition: all 0.1s ease;
-                  width: 2.2em;
-                }
-                &::-moz-focus-inner {
-                  border: 0;
-                }
-                .ms-Fabric--isFocusVisible &:focus:after {
-                  border: 1px solid #ffffff;
-                  bottom: -2px;
-                  content: "";
-                  left: -2px;
-                  outline: 1px solid #666666;
-                  position: absolute;
-                  right: -2px;
-                  top: -2px;
-                  z-index: 1;
-                }
-                &:hover {
-                  border-color: #333333;
-                }
-                @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
-                  border-color: Highlight;
-                }
-                @media screen and (-ms-high-contrast: active){&:hover {
-                  border-color: Highlight;
-                }
-            data-is-focusable={true}
-            id="Toggle5"
-            onChange={[Function]}
-            onClick={[Function]}
-            role="switch"
-            type="button"
-          >
-            <div
-              className=
-                  ms-Toggle-thumb
-                  {
-                    background-color: #333333;
-                    border-color: transparent;
-                    border-radius: .5em;
-                    border-style: solid;
-                    border-width: .28em;
-                    box-sizing: border-box;
-                    height: .5em;
-                    transition: all 0.1s ease;
-                    width: .5em;
-                  }
-            />
-          </button>
-          <label
+          <input
+            aria-invalid={false}
             className=
-                ms-Label
-                ms-Toggle-stateText
+                ms-TextField-field
                 {
                   -moz-osx-font-smoothing: grayscale;
                   -webkit-font-smoothing: antialiased;
+                  background-color: transparent;
+                  background: none;
+                  border-radius: 0px;
+                  border: none;
                   box-shadow: none;
                   box-sizing: border-box;
                   color: #333333;
-                  display: block;
                   font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
@@ -478,30 +299,86 @@ exports[`Component Examples renders FocusTrapZone.Box.Example.tsx correctly 1`]
                   margin-left: 0px;
                   margin-right: 0px;
                   margin-top: 0px;
-                  overflow-wrap: break-word;
-                  padding-bottom: 5px;
-                  padding-left: 0;
-                  padding-right: 0;
-                  padding-top: 5px;
-                  word-wrap: break-word;
-                }
-                && {
-                  margin-bottom: 0;
-                  margin-left: 8px;
-                  margin-right: 8px;
-                  margin-top: 0;
+                  min-width: 0px;
+                  outline: 0px;
                   padding-bottom: 0;
-                  padding-left: 0;
-                  padding-right: 0;
+                  padding-left: 12px;
+                  padding-right: 12px;
                   padding-top: 0;
-                  user-select: none;
+                  text-overflow: ellipsis;
+                  width: 100%;
+                }
+                &:active, &:focus, &:hover {
+                  outline: 0px;
+                }
+                &::-ms-clear {
+                  display: none;
+                }
+                &::placeholder {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  color: #666666;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  opacity: 1;
+                }
+                &:-ms-input-placeholder {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  color: #666666;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  opacity: 1;
                 }
-          >
-            Off
-          </label>
+            id="TextField1"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onInput={[Function]}
+            type="text"
+            value=""
+          />
         </div>
       </div>
     </div>
+    <a
+      className=
+          ms-Link
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            color: #0078d4;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: inherit;
+            font-weight: inherit;
+            outline: none;
+            text-decoration: none;
+          }
+          .ms-Fabric--isFocusVisible &:focus {
+            box-shadow: 0 0 0 1px #666666 inset;
+          }
+          @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus {
+            outline: 1px solid WindowText;
+          }
+          @media screen and (-ms-high-contrast: active){& {
+            border-bottom: none;
+          }
+          &:active, &:hover, &:active:hover {
+            color: #004578;
+          }
+          @media screen and (-ms-high-contrast: active){&:active, &:hover, &:active:hover {
+            text-decoration: underline;
+          }
+          &:focus {
+            color: #0078d4;
+          }
+      href="https://bing.com"
+      onClick={[Function]}
+    >
+      Hyperlink inside trap zone
+    </a>
   </div>
 </div>
 `;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx.shot
index ac438703800d0..85f66a9b45990 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx.shot
@@ -2,132 +2,57 @@
 
 exports[`Component Examples renders FocusTrapZone.Box.FocusOnCustomElement.Example.tsx correctly 1`] = `
 <div>
-  <button
+  <div
     className=
-        ms-Button
-        ms-Button--default
+        ms-Stack
         {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          background-color: #f4f4f4;
-          border-radius: 0px;
-          border: 1px solid transparent;
+          align-items: flex-start;
+          border: 2px solid transparent;
           box-sizing: border-box;
-          color: #333333;
-          cursor: pointer;
-          display: inline-block;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: 32px;
-          min-width: 80px;
-          outline: transparent;
-          padding-bottom: 0;
-          padding-left: 16px;
-          padding-right: 16px;
-          padding-top: 0;
-          position: relative;
-          text-align: center;
-          text-decoration: none;
-          user-select: none;
-          vertical-align: top;
+          display: flex;
+          flex-direction: column;
+          flex-wrap: nowrap;
+          height: auto;
+          padding-bottom: 10px;
+          padding-left: 10px;
+          padding-right: 10px;
+          padding-top: 10px;
+          width: auto;
         }
-        &::-moz-focus-inner {
-          border: 0;
+        & > * {
+          text-overflow: ellipsis;
         }
-        .ms-Fabric--isFocusVisible &:focus:after {
-          border: 1px solid #ffffff;
-          bottom: 0px;
-          content: "";
-          left: 0px;
-          outline: 1px solid #666666;
-          position: absolute;
-          right: 0px;
-          top: 0px;
-          z-index: 1;
+        & > *:not(:first-child) {
+          margin-top: 15px;
         }
-        @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-          border: none;
-          bottom: -2px;
-          left: -2px;
-          outline-color: ButtonText;
-          right: -2px;
-          top: -2px;
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 1;
         }
-        &:active > * {
-          left: 0px;
-          position: relative;
-          top: 0px;
-        }
-        &:hover {
-          background-color: #eaeaea;
-          color: #212121;
-        }
-        @media screen and (-ms-high-contrast: active){&:hover {
-          border-color: Highlight;
-          color: Highlight;
-        }
-        &:active {
-          background-color: #c8c8c8;
-          color: #212121;
-        }
-    data-is-focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyPress={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    onMouseUp={[Function]}
-    type="button"
   >
     <div
       className=
-          ms-Button-flexContainer
+          ms-Toggle
+          is-enabled
           {
-            align-items: center;
-            display: flex;
-            flex-wrap: nowrap;
-            height: 100%;
-            justify-content: center;
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            margin-bottom: 8px;
           }
     >
-      <div
+      <label
         className=
-            ms-Button-textContainer
-            {
-              flex-grow: 1;
-            }
-      >
-        <div
-          className=
-              ms-Button-label
-              {
-                font-weight: 600;
-                line-height: 100%;
-                margin-bottom: 0;
-                margin-left: 4px;
-                margin-right: 4px;
-                margin-top: 0;
-              }
-          id="id__0"
-        >
-          Go to Trap Zone
-        </div>
-      </div>
-    </div>
-  </button>
-  <div>
-    <div
-      className="ms-FocusTrapZoneBoxExample"
-    >
-      <div
-        className=
-            ms-TextField
+            ms-Label
+            ms-Toggle-label
             {
               -moz-osx-font-smoothing: grayscale;
               -webkit-font-smoothing: antialiased;
               box-shadow: none;
               box-sizing: border-box;
+              color: #333333;
+              display: block;
               font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
               font-size: 14px;
               font-weight: 400;
@@ -135,228 +60,238 @@ exports[`Component Examples renders FocusTrapZone.Box.FocusOnCustomElement.Examp
               margin-left: 0px;
               margin-right: 0px;
               margin-top: 0px;
-              padding-bottom: 0px;
-              padding-left: 0px;
-              padding-right: 0px;
-              padding-top: 0px;
+              overflow-wrap: break-word;
+              padding-bottom: 5px;
+              padding-left: 0;
+              padding-right: 0;
+              padding-top: 5px;
+              word-wrap: break-word;
+            }
+        htmlFor="Toggle0"
+      >
+        Use trap zone
+      </label>
+      <div
+        className=
+            ms-Toggle-innerContainer
+            {
+              display: inline-flex;
               position: relative;
             }
       >
-        <div
+        <button
+          aria-checked={false}
+          checked={false}
           className=
-              ms-TextField-wrapper
-
+              ms-Toggle-background
+              {
+                align-items: center;
+                background: #ffffff;
+                border-color: #666666;
+                border-radius: 1em;
+                border-style: solid;
+                border-width: 1px;
+                box-sizing: border-box;
+                cursor: pointer;
+                display: flex;
+                font-size: 20px;
+                height: 1em;
+                outline: transparent;
+                padding-bottom: 0;
+                padding-left: .2em;
+                padding-right: .2em;
+                padding-top: 0;
+                position: relative;
+                transition: all 0.1s ease;
+                width: 2.2em;
+              }
+              &::-moz-focus-inner {
+                border: 0;
+              }
+              .ms-Fabric--isFocusVisible &:focus:after {
+                border: 1px solid #ffffff;
+                bottom: -2px;
+                content: "";
+                left: -2px;
+                outline: 1px solid #666666;
+                position: absolute;
+                right: -2px;
+                top: -2px;
+                z-index: 1;
+              }
+              &:hover {
+                border-color: #333333;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
+                border-color: Highlight;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover {
+                border-color: Highlight;
+              }
+          data-is-focusable={true}
+          id="Toggle0"
+          onChange={[Function]}
+          onClick={[Function]}
+          role="switch"
+          type="button"
         >
-          <label
-            className=
-                ms-Label
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  box-shadow: none;
-                  box-sizing: border-box;
-                  color: #333333;
-                  display: block;
-                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                  font-size: 14px;
-                  font-weight: 400;
-                  margin-bottom: 0px;
-                  margin-left: 0px;
-                  margin-right: 0px;
-                  margin-top: 0px;
-                  overflow-wrap: break-word;
-                  padding-bottom: 5px;
-                  padding-left: 0;
-                  padding-right: 0;
-                  padding-top: 5px;
-                  word-wrap: break-word;
-                }
-            htmlFor="TextField3"
-          >
-            Default TextField
-          </label>
           <div
             className=
-                ms-TextField-fieldGroup
+                ms-Toggle-thumb
                 {
-                  align-items: stretch;
-                  background: #ffffff;
-                  border: 1px solid #a6a6a6;
-                  box-shadow: none;
+                  background-color: #333333;
+                  border-color: transparent;
+                  border-radius: .5em;
+                  border-style: solid;
+                  border-width: .28em;
                   box-sizing: border-box;
-                  cursor: text;
-                  display: flex;
-                  flex-direction: row;
-                  height: 32px;
-                  margin-bottom: 0px;
-                  margin-left: 0px;
-                  margin-right: 0px;
-                  margin-top: 0px;
-                  padding-bottom: 0px;
-                  padding-left: 0px;
-                  padding-right: 0px;
-                  padding-top: 0px;
-                  position: relative;
-                }
-                &:hover {
-                  border-color: #333333;
+                  height: .5em;
+                  transition: all 0.1s ease;
+                  width: .5em;
                 }
-                @media screen and (-ms-high-contrast: active){&:hover {
-                  border-color: Highlight;
-                }
-          >
-            <input
-              aria-invalid={false}
-              className=
-                  ms-TextField-field
-                  {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    background-color: transparent;
-                    background: none;
-                    border-radius: 0px;
-                    border: none;
-                    box-shadow: none;
-                    box-sizing: border-box;
-                    color: #333333;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    margin-bottom: 0px;
-                    margin-left: 0px;
-                    margin-right: 0px;
-                    margin-top: 0px;
-                    min-width: 0px;
-                    outline: 0px;
-                    padding-bottom: 0;
-                    padding-left: 12px;
-                    padding-right: 12px;
-                    padding-top: 0;
-                    text-overflow: ellipsis;
-                    width: 100%;
-                  }
-                  &:active, &:focus, &:hover {
-                    outline: 0px;
-                  }
-                  &::-ms-clear {
-                    display: none;
-                  }
-                  &::placeholder {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #666666;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    opacity: 1;
-                  }
-                  &:-ms-input-placeholder {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #666666;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    opacity: 1;
-                  }
-              id="TextField3"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              onInput={[Function]}
-              placeholder="Input inside Focus Trap Zone"
-              type="text"
-              value=""
-            />
-          </div>
-        </div>
+          />
+        </button>
+        <label
+          className=
+              ms-Label
+              ms-Toggle-stateText
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                display: block;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow-wrap: break-word;
+                padding-bottom: 5px;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 5px;
+                word-wrap: break-word;
+              }
+              && {
+                margin-bottom: 0;
+                margin-left: 8px;
+                margin-right: 8px;
+                margin-top: 0;
+                padding-bottom: 0;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 0;
+                user-select: none;
+              }
+        >
+          Off
+        </label>
       </div>
-      <button
+    </div>
+    <div
+      className=
+          ms-TextField
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            box-shadow: none;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            margin-bottom: 0px;
+            margin-left: 0px;
+            margin-right: 0px;
+            margin-top: 0px;
+            padding-bottom: 0px;
+            padding-left: 0px;
+            padding-right: 0px;
+            padding-top: 0px;
+            position: relative;
+            width: 300px;
+          }
+    >
+      <div
         className=
-            ms-Link
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              background-color: transparent;
-              background: none;
-              border-bottom: 1px solid transparent;
-              border: none;
-              color: #0078d4;
-              cursor: pointer;
-              display: inline;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: inherit;
-              font-weight: inherit;
-              margin-bottom: 0px;
-              margin-left: 0px;
-              margin-right: 0px;
-              margin-top: 0px;
-              outline: none;
-              overflow: inherit;
-              padding-bottom: 0px;
-              padding-left: 0px;
-              padding-right: 0px;
-              padding-top: 0px;
-              text-align: left;
-              text-overflow: inherit;
-              user-select: text;
-            }
-            .ms-Fabric--isFocusVisible &:focus {
-              box-shadow: 0 0 0 1px #666666 inset;
-            }
-            @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus {
-              outline: 1px solid WindowText;
-            }
-            @media screen and (-ms-high-contrast: active){& {
-              border-bottom: none;
-            }
-            @media screen and (-ms-high-contrast: white-on-black){& {
-              color: #FFFF00;
-            }
-            @media screen and (-ms-high-contrast: black-on-white){& {
-              color: #00009F;
-            }
-            &:active, &:hover, &:active:hover {
-              color: #004578;
-            }
-            @media screen and (-ms-high-contrast: active){&:active, &:hover, &:active:hover {
-              text-decoration: underline;
-            }
-            &:focus {
-              color: #0078d4;
-            }
-        onClick={[Function]}
-        type="button"
+            ms-TextField-wrapper
+
       >
-        Hyperlink inside FocusTrapZone
-      </button>
-      <br />
-      <br />
-      <div>
-        <div
+        <label
           className=
-              ms-Toggle
-              is-enabled
+              ms-Label
               {
                 -moz-osx-font-smoothing: grayscale;
                 -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                display: block;
                 font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                 font-size: 14px;
                 font-weight: 400;
-                margin-bottom: 8px;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow-wrap: break-word;
+                padding-bottom: 5px;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 5px;
+                word-wrap: break-word;
               }
+          htmlFor="TextField1"
         >
-          <label
+          Input inside trap zone
+        </label>
+        <div
+          className=
+              ms-TextField-fieldGroup
+              {
+                align-items: stretch;
+                background: #ffffff;
+                border: 1px solid #a6a6a6;
+                box-shadow: none;
+                box-sizing: border-box;
+                cursor: text;
+                display: flex;
+                flex-direction: row;
+                height: 32px;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
+                position: relative;
+              }
+              &:hover {
+                border-color: #333333;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover {
+                border-color: Highlight;
+              }
+        >
+          <input
+            aria-invalid={false}
             className=
-                ms-Label
-                ms-Toggle-label
+                ms-TextField-field
                 {
                   -moz-osx-font-smoothing: grayscale;
                   -webkit-font-smoothing: antialiased;
+                  background-color: transparent;
+                  background: none;
+                  border-radius: 0px;
+                  border: none;
                   box-shadow: none;
                   box-sizing: border-box;
                   color: #333333;
-                  display: block;
                   font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
@@ -364,140 +299,87 @@ exports[`Component Examples renders FocusTrapZone.Box.FocusOnCustomElement.Examp
                   margin-left: 0px;
                   margin-right: 0px;
                   margin-top: 0px;
-                  overflow-wrap: break-word;
-                  padding-bottom: 5px;
-                  padding-left: 0;
-                  padding-right: 0;
-                  padding-top: 5px;
-                  word-wrap: break-word;
+                  min-width: 0px;
+                  outline: 0px;
+                  padding-bottom: 0;
+                  padding-left: 12px;
+                  padding-right: 12px;
+                  padding-top: 0;
+                  text-overflow: ellipsis;
+                  width: 100%;
                 }
-            htmlFor="Toggle5"
-          >
-            Focus Trap Zone
-          </label>
-          <div
-            className=
-                ms-Toggle-innerContainer
-                {
-                  display: inline-flex;
-                  position: relative;
+                &:active, &:focus, &:hover {
+                  outline: 0px;
+                }
+                &::-ms-clear {
+                  display: none;
+                }
+                &::placeholder {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  color: #666666;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  opacity: 1;
                 }
-          >
-            <button
-              aria-checked={false}
-              checked={false}
-              className=
-                  ms-Toggle-background
-                  {
-                    align-items: center;
-                    background: #ffffff;
-                    border-color: #666666;
-                    border-radius: 1em;
-                    border-style: solid;
-                    border-width: 1px;
-                    box-sizing: border-box;
-                    cursor: pointer;
-                    display: flex;
-                    font-size: 20px;
-                    height: 1em;
-                    outline: transparent;
-                    padding-bottom: 0;
-                    padding-left: .2em;
-                    padding-right: .2em;
-                    padding-top: 0;
-                    position: relative;
-                    transition: all 0.1s ease;
-                    width: 2.2em;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-                  .ms-Fabric--isFocusVisible &:focus:after {
-                    border: 1px solid #ffffff;
-                    bottom: -2px;
-                    content: "";
-                    left: -2px;
-                    outline: 1px solid #666666;
-                    position: absolute;
-                    right: -2px;
-                    top: -2px;
-                    z-index: 1;
-                  }
-                  &:hover {
-                    border-color: #333333;
-                  }
-                  @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
-                    border-color: Highlight;
-                  }
-                  @media screen and (-ms-high-contrast: active){&:hover {
-                    border-color: Highlight;
-                  }
-              data-is-focusable={true}
-              id="Toggle5"
-              onChange={[Function]}
-              onClick={[Function]}
-              role="switch"
-              type="button"
-            >
-              <div
-                className=
-                    ms-Toggle-thumb
-                    {
-                      background-color: #333333;
-                      border-color: transparent;
-                      border-radius: .5em;
-                      border-style: solid;
-                      border-width: .28em;
-                      box-sizing: border-box;
-                      height: .5em;
-                      transition: all 0.1s ease;
-                      width: .5em;
-                    }
-              />
-            </button>
-            <label
-              className=
-                  ms-Label
-                  ms-Toggle-stateText
-                  {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    box-shadow: none;
-                    box-sizing: border-box;
-                    color: #333333;
-                    display: block;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    margin-bottom: 0px;
-                    margin-left: 0px;
-                    margin-right: 0px;
-                    margin-top: 0px;
-                    overflow-wrap: break-word;
-                    padding-bottom: 5px;
-                    padding-left: 0;
-                    padding-right: 0;
-                    padding-top: 5px;
-                    word-wrap: break-word;
-                  }
-                  && {
-                    margin-bottom: 0;
-                    margin-left: 8px;
-                    margin-right: 8px;
-                    margin-top: 0;
-                    padding-bottom: 0;
-                    padding-left: 0;
-                    padding-right: 0;
-                    padding-top: 0;
-                    user-select: none;
-                  }
-            >
-              Off
-            </label>
-          </div>
+                &:-ms-input-placeholder {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  color: #666666;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  opacity: 1;
+                }
+            id="TextField1"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onInput={[Function]}
+            type="text"
+            value=""
+          />
         </div>
       </div>
     </div>
+    <a
+      className=
+          ms-Link
+          shouldFocusInput
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            color: #0078d4;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: inherit;
+            font-weight: inherit;
+            outline: none;
+            text-decoration: none;
+          }
+          .ms-Fabric--isFocusVisible &:focus {
+            box-shadow: 0 0 0 1px #666666 inset;
+          }
+          @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus {
+            outline: 1px solid WindowText;
+          }
+          @media screen and (-ms-high-contrast: active){& {
+            border-bottom: none;
+          }
+          &:active, &:hover, &:active:hover {
+            color: #004578;
+          }
+          @media screen and (-ms-high-contrast: active){&:active, &:hover, &:active:hover {
+            text-decoration: underline;
+          }
+          &:focus {
+            color: #0078d4;
+          }
+      href="https://bing.com"
+      onClick={[Function]}
+    >
+      Hyperlink which will receive initial focus when trap zone is activated
+    </a>
   </div>
 </div>
 `;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.FocusZone.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.FocusZone.Example.tsx.shot
index e24b4ed185576..472e3496b659c 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.FocusZone.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.FocusZone.Example.tsx.shot
@@ -2,138 +2,230 @@
 
 exports[`Component Examples renders FocusTrapZone.FocusZone.Example.tsx correctly 1`] = `
 <div>
-  <button
-    aria-describedby="id__1"
-    aria-labelledby="id__0"
+  <div
     className=
-        ms-Button
-        ms-Button--default
+        ms-Stack
         {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          background-color: #f4f4f4;
-          border-radius: 0px;
-          border: 1px solid transparent;
+          align-items: flex-start;
+          border: 2px solid transparent;
           box-sizing: border-box;
-          color: #333333;
-          cursor: pointer;
-          display: inline-block;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: 32px;
-          min-width: 80px;
-          outline: transparent;
-          padding-bottom: 0;
-          padding-left: 16px;
-          padding-right: 16px;
-          padding-top: 0;
-          position: relative;
-          text-align: center;
-          text-decoration: none;
-          user-select: none;
-          vertical-align: top;
+          display: flex;
+          flex-direction: column;
+          flex-wrap: nowrap;
+          height: auto;
+          padding-bottom: 10px;
+          padding-left: 10px;
+          padding-right: 10px;
+          padding-top: 10px;
+          width: auto;
         }
-        &::-moz-focus-inner {
-          border: 0;
+        & > * {
+          text-overflow: ellipsis;
         }
-        .ms-Fabric--isFocusVisible &:focus:after {
-          border: 1px solid #ffffff;
-          bottom: 0px;
-          content: "";
-          left: 0px;
-          outline: 1px solid #666666;
-          position: absolute;
-          right: 0px;
-          top: 0px;
-          z-index: 1;
+        & > *:not(:first-child) {
+          margin-top: 15px;
         }
-        @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-          border: none;
-          bottom: -2px;
-          left: -2px;
-          outline-color: ButtonText;
-          right: -2px;
-          top: -2px;
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 1;
         }
-        &:active > * {
-          left: 0px;
-          position: relative;
-          top: 0px;
-        }
-        &:hover {
-          background-color: #eaeaea;
-          color: #212121;
-        }
-        @media screen and (-ms-high-contrast: active){&:hover {
-          border-color: Highlight;
-          color: Highlight;
-        }
-        &:active {
-          background-color: #c8c8c8;
-          color: #212121;
-        }
-    data-is-focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyPress={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    onMouseUp={[Function]}
-    type="button"
   >
     <div
       className=
-          ms-Button-flexContainer
+          ms-Toggle
+          is-enabled
           {
-            align-items: center;
-            display: flex;
-            flex-wrap: nowrap;
-            height: 100%;
-            justify-content: center;
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            margin-bottom: 8px;
           }
     >
+      <label
+        className=
+            ms-Label
+            ms-Toggle-label
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              box-shadow: none;
+              box-sizing: border-box;
+              color: #333333;
+              display: block;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              margin-bottom: 0px;
+              margin-left: 0px;
+              margin-right: 0px;
+              margin-top: 0px;
+              overflow-wrap: break-word;
+              padding-bottom: 5px;
+              padding-left: 0;
+              padding-right: 0;
+              padding-top: 5px;
+              word-wrap: break-word;
+            }
+        htmlFor="Toggle0"
+      >
+        Use trap zone
+      </label>
       <div
         className=
-            ms-Button-textContainer
+            ms-Toggle-innerContainer
             {
-              flex-grow: 1;
+              display: inline-flex;
+              position: relative;
             }
       >
-        <div
+        <button
+          aria-checked={false}
+          checked={false}
           className=
-              ms-Button-label
+              ms-Toggle-background
               {
-                font-weight: 600;
-                line-height: 100%;
+                align-items: center;
+                background: #ffffff;
+                border-color: #666666;
+                border-radius: 1em;
+                border-style: solid;
+                border-width: 1px;
+                box-sizing: border-box;
+                cursor: pointer;
+                display: flex;
+                font-size: 20px;
+                height: 1em;
+                outline: transparent;
+                padding-bottom: 0;
+                padding-left: .2em;
+                padding-right: .2em;
+                padding-top: 0;
+                position: relative;
+                transition: all 0.1s ease;
+                width: 2.2em;
+              }
+              &::-moz-focus-inner {
+                border: 0;
+              }
+              .ms-Fabric--isFocusVisible &:focus:after {
+                border: 1px solid #ffffff;
+                bottom: -2px;
+                content: "";
+                left: -2px;
+                outline: 1px solid #666666;
+                position: absolute;
+                right: -2px;
+                top: -2px;
+                z-index: 1;
+              }
+              &:hover {
+                border-color: #333333;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
+                border-color: Highlight;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover {
+                border-color: Highlight;
+              }
+          data-is-focusable={true}
+          id="Toggle0"
+          onChange={[Function]}
+          onClick={[Function]}
+          role="switch"
+          type="button"
+        >
+          <div
+            className=
+                ms-Toggle-thumb
+                {
+                  background-color: #333333;
+                  border-color: transparent;
+                  border-radius: .5em;
+                  border-style: solid;
+                  border-width: .28em;
+                  box-sizing: border-box;
+                  height: .5em;
+                  transition: all 0.1s ease;
+                  width: .5em;
+                }
+          />
+        </button>
+        <label
+          className=
+              ms-Label
+              ms-Toggle-stateText
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                display: block;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow-wrap: break-word;
+                padding-bottom: 5px;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 5px;
+                word-wrap: break-word;
+              }
+              && {
                 margin-bottom: 0;
-                margin-left: 4px;
-                margin-right: 4px;
+                margin-left: 8px;
+                margin-right: 8px;
                 margin-top: 0;
+                padding-bottom: 0;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 0;
+                user-select: none;
               }
-          id="id__0"
         >
-          Go to Trap Zone
-        </div>
+          Off
+        </label>
       </div>
     </div>
-  </button>
-  <div>
     <div
-      className=
-
-          {
-            border: 1px dashed #ababab;
-          }
+      className="ms-FocusZone"
+      data-focuszone-id="FocusZone1"
+      data-is-visible={true}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onMouseDownCapture={[Function]}
+      role="presentation"
     >
       <div
-        className="ms-FocusZone"
-        data-focuszone-id="FocusZone3"
-        data-is-visible={true}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDownCapture={[Function]}
-        role="presentation"
+        className=
+            ms-Stack
+            {
+              border: 2px dashed #ababab;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              height: auto;
+              padding-bottom: 10px;
+              padding-left: 10px;
+              padding-right: 10px;
+              padding-top: 10px;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+            }
+            & > *:not(:first-child) {
+              margin-left: 10px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 1;
+            }
       >
         <button
           className=
@@ -242,7 +334,7 @@ exports[`Component Examples renders FocusTrapZone.FocusZone.Example.tsx correctl
                       margin-right: 4px;
                       margin-top: 0;
                     }
-                id="id__4"
+                id="id__2"
               >
                 FZ1
               </div>
@@ -356,7 +448,7 @@ exports[`Component Examples renders FocusTrapZone.FocusZone.Example.tsx correctl
                       margin-right: 4px;
                       margin-top: 0;
                     }
-                id="id__7"
+                id="id__5"
               >
                 FZ1
               </div>
@@ -470,7 +562,7 @@ exports[`Component Examples renders FocusTrapZone.FocusZone.Example.tsx correctl
                       margin-right: 4px;
                       margin-top: 0;
                     }
-                id="id__10"
+                id="id__8"
               >
                 FZ1
               </div>
@@ -478,131 +570,155 @@ exports[`Component Examples renders FocusTrapZone.FocusZone.Example.tsx correctl
           </div>
         </button>
       </div>
-      <br />
-      <button
+    </div>
+    <button
+      className=
+          ms-Button
+          ms-Button--default
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            background-color: #f4f4f4;
+            border-radius: 0px;
+            border: 1px solid transparent;
+            box-sizing: border-box;
+            color: #333333;
+            cursor: pointer;
+            display: inline-block;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: 32px;
+            min-width: 80px;
+            outline: transparent;
+            padding-bottom: 0;
+            padding-left: 16px;
+            padding-right: 16px;
+            padding-top: 0;
+            position: relative;
+            text-align: center;
+            text-decoration: none;
+            user-select: none;
+            vertical-align: top;
+          }
+          &::-moz-focus-inner {
+            border: 0;
+          }
+          .ms-Fabric--isFocusVisible &:focus:after {
+            border: 1px solid #ffffff;
+            bottom: 0px;
+            content: "";
+            left: 0px;
+            outline: 1px solid #666666;
+            position: absolute;
+            right: 0px;
+            top: 0px;
+            z-index: 1;
+          }
+          @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+            border: none;
+            bottom: -2px;
+            left: -2px;
+            outline-color: ButtonText;
+            right: -2px;
+            top: -2px;
+          }
+          &:active > * {
+            left: 0px;
+            position: relative;
+            top: 0px;
+          }
+          &:hover {
+            background-color: #eaeaea;
+            color: #212121;
+          }
+          @media screen and (-ms-high-contrast: active){&:hover {
+            border-color: Highlight;
+            color: Highlight;
+          }
+          &:active {
+            background-color: #c8c8c8;
+            color: #212121;
+          }
+      data-is-focusable={true}
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onKeyPress={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+      type="button"
+    >
+      <div
         className=
-            ms-Button
-            ms-Button--default
+            ms-Button-flexContainer
             {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              background-color: #f4f4f4;
-              border-radius: 0px;
-              border: 1px solid transparent;
-              box-sizing: border-box;
-              color: #333333;
-              cursor: pointer;
-              display: inline-block;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              height: 32px;
-              min-width: 80px;
-              outline: transparent;
-              padding-bottom: 0;
-              padding-left: 16px;
-              padding-right: 16px;
-              padding-top: 0;
-              position: relative;
-              text-align: center;
-              text-decoration: none;
-              user-select: none;
-              vertical-align: top;
-            }
-            &::-moz-focus-inner {
-              border: 0;
-            }
-            .ms-Fabric--isFocusVisible &:focus:after {
-              border: 1px solid #ffffff;
-              bottom: 0px;
-              content: "";
-              left: 0px;
-              outline: 1px solid #666666;
-              position: absolute;
-              right: 0px;
-              top: 0px;
-              z-index: 1;
+              align-items: center;
+              display: flex;
+              flex-wrap: nowrap;
+              height: 100%;
+              justify-content: center;
             }
-            @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-              border: none;
-              bottom: -2px;
-              left: -2px;
-              outline-color: ButtonText;
-              right: -2px;
-              top: -2px;
-            }
-            &:active > * {
-              left: 0px;
-              position: relative;
-              top: 0px;
-            }
-            &:hover {
-              background-color: #eaeaea;
-              color: #212121;
-            }
-            @media screen and (-ms-high-contrast: active){&:hover {
-              border-color: Highlight;
-              color: Highlight;
-            }
-            &:active {
-              background-color: #c8c8c8;
-              color: #212121;
-            }
-        data-is-focusable={true}
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        onKeyPress={[Function]}
-        onKeyUp={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        type="button"
       >
         <div
           className=
-              ms-Button-flexContainer
+              ms-Button-textContainer
               {
-                align-items: center;
-                display: flex;
-                flex-wrap: nowrap;
-                height: 100%;
-                justify-content: center;
+                flex-grow: 1;
               }
         >
           <div
             className=
-                ms-Button-textContainer
+                ms-Button-label
                 {
-                  flex-grow: 1;
+                  font-weight: 600;
+                  line-height: 100%;
+                  margin-bottom: 0;
+                  margin-left: 4px;
+                  margin-right: 4px;
+                  margin-top: 0;
                 }
+            id="id__11"
           >
-            <div
-              className=
-                  ms-Button-label
-                  {
-                    font-weight: 600;
-                    line-height: 100%;
-                    margin-bottom: 0;
-                    margin-left: 4px;
-                    margin-right: 4px;
-                    margin-top: 0;
-                  }
-              id="id__13"
-            >
-              No FZ
-            </div>
+            No FZ
           </div>
         </div>
-      </button>
-      <br />
-      <br />
+      </div>
+    </button>
+    <div
+      className="ms-FocusZone"
+      data-focuszone-id="FocusZone14"
+      data-is-visible={true}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onMouseDownCapture={[Function]}
+      role="presentation"
+    >
       <div
-        className="ms-FocusZone"
-        data-focuszone-id="FocusZone16"
-        data-is-visible={true}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onMouseDownCapture={[Function]}
-        role="presentation"
+        className=
+            ms-Stack
+            {
+              border: 2px dashed #ababab;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              height: auto;
+              padding-bottom: 10px;
+              padding-left: 10px;
+              padding-right: 10px;
+              padding-top: 10px;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+            }
+            & > *:not(:first-child) {
+              margin-left: 10px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 1;
+            }
       >
         <button
           className=
@@ -711,7 +827,7 @@ exports[`Component Examples renders FocusTrapZone.FocusZone.Example.tsx correctl
                       margin-right: 4px;
                       margin-top: 0;
                     }
-                id="id__17"
+                id="id__15"
               >
                 FZ2
               </div>
@@ -825,7 +941,7 @@ exports[`Component Examples renders FocusTrapZone.FocusZone.Example.tsx correctl
                       margin-right: 4px;
                       margin-top: 0;
                     }
-                id="id__20"
+                id="id__18"
               >
                 FZ2
               </div>
@@ -939,7 +1055,7 @@ exports[`Component Examples renders FocusTrapZone.FocusZone.Example.tsx correctl
                       margin-right: 4px;
                       margin-top: 0;
                     }
-                id="id__23"
+                id="id__21"
               >
                 FZ2
               </div>
@@ -947,170 +1063,6 @@ exports[`Component Examples renders FocusTrapZone.FocusZone.Example.tsx correctl
           </div>
         </button>
       </div>
-      <br />
-      <div
-        className=
-            ms-Toggle
-            is-enabled
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              margin-bottom: 8px;
-            }
-      >
-        <label
-          className=
-              ms-Label
-              ms-Toggle-label
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                box-shadow: none;
-                box-sizing: border-box;
-                color: #333333;
-                display: block;
-                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                font-size: 14px;
-                font-weight: 400;
-                margin-bottom: 0px;
-                margin-left: 0px;
-                margin-right: 0px;
-                margin-top: 0px;
-                overflow-wrap: break-word;
-                padding-bottom: 5px;
-                padding-left: 0;
-                padding-right: 0;
-                padding-top: 5px;
-                word-wrap: break-word;
-              }
-          htmlFor="Toggle26"
-        >
-          Focus Trap Zone
-        </label>
-        <div
-          className=
-              ms-Toggle-innerContainer
-              {
-                display: inline-flex;
-                position: relative;
-              }
-        >
-          <button
-            aria-checked={false}
-            checked={false}
-            className=
-                ms-Toggle-background
-                {
-                  align-items: center;
-                  background: #ffffff;
-                  border-color: #666666;
-                  border-radius: 1em;
-                  border-style: solid;
-                  border-width: 1px;
-                  box-sizing: border-box;
-                  cursor: pointer;
-                  display: flex;
-                  font-size: 20px;
-                  height: 1em;
-                  outline: transparent;
-                  padding-bottom: 0;
-                  padding-left: .2em;
-                  padding-right: .2em;
-                  padding-top: 0;
-                  position: relative;
-                  transition: all 0.1s ease;
-                  width: 2.2em;
-                }
-                &::-moz-focus-inner {
-                  border: 0;
-                }
-                .ms-Fabric--isFocusVisible &:focus:after {
-                  border: 1px solid #ffffff;
-                  bottom: -2px;
-                  content: "";
-                  left: -2px;
-                  outline: 1px solid #666666;
-                  position: absolute;
-                  right: -2px;
-                  top: -2px;
-                  z-index: 1;
-                }
-                &:hover {
-                  border-color: #333333;
-                }
-                @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
-                  border-color: Highlight;
-                }
-                @media screen and (-ms-high-contrast: active){&:hover {
-                  border-color: Highlight;
-                }
-            data-is-focusable={true}
-            id="Toggle26"
-            onChange={[Function]}
-            onClick={[Function]}
-            role="switch"
-            type="button"
-          >
-            <div
-              className=
-                  ms-Toggle-thumb
-                  {
-                    background-color: #333333;
-                    border-color: transparent;
-                    border-radius: .5em;
-                    border-style: solid;
-                    border-width: .28em;
-                    box-sizing: border-box;
-                    height: .5em;
-                    transition: all 0.1s ease;
-                    width: .5em;
-                  }
-            />
-          </button>
-          <label
-            className=
-                ms-Label
-                ms-Toggle-stateText
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  box-shadow: none;
-                  box-sizing: border-box;
-                  color: #333333;
-                  display: block;
-                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                  font-size: 14px;
-                  font-weight: 400;
-                  margin-bottom: 0px;
-                  margin-left: 0px;
-                  margin-right: 0px;
-                  margin-top: 0px;
-                  overflow-wrap: break-word;
-                  padding-bottom: 5px;
-                  padding-left: 0;
-                  padding-right: 0;
-                  padding-top: 5px;
-                  word-wrap: break-word;
-                }
-                && {
-                  margin-bottom: 0;
-                  margin-left: 8px;
-                  margin-right: 8px;
-                  margin-top: 0;
-                  padding-bottom: 0;
-                  padding-left: 0;
-                  padding-right: 0;
-                  padding-top: 0;
-                  user-select: none;
-                }
-          >
-            Off
-          </label>
-        </div>
-      </div>
     </div>
   </div>
 </div>
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Nested.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Nested.Example.tsx.shot
index b7c2a659e6b19..ae0d92b0213c8 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Nested.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Nested.Example.tsx.shot
@@ -2,131 +2,148 @@
 
 exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1`] = `
 <div>
-  <div
+  <button
     className=
-
+        ms-Button
+        ms-Button--default
         {
-          border: 2px solid black;
-          padding-bottom: 5px;
-          padding-left: 5px;
-          padding-right: 5px;
-          padding-top: 5px;
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          background-color: #f4f4f4;
+          border-radius: 0px;
+          border: 1px solid transparent;
+          box-sizing: border-box;
+          color: #333333;
+          cursor: pointer;
+          display: inline-block;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: 32px;
+          margin-bottom: 10px;
+          min-width: 80px;
+          outline: transparent;
+          padding-bottom: 0;
+          padding-left: 16px;
+          padding-right: 16px;
+          padding-top: 0;
+          position: relative;
+          text-align: center;
+          text-decoration: none;
+          user-select: none;
+          vertical-align: top;
+        }
+        &::-moz-focus-inner {
+          border: 0;
+        }
+        .ms-Fabric--isFocusVisible &:focus:after {
+          border: 1px solid #ffffff;
+          bottom: 0px;
+          content: "";
+          left: 0px;
+          outline: 1px solid #666666;
+          position: absolute;
+          right: 0px;
+          top: 0px;
+          z-index: 1;
+        }
+        @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+          border: none;
+          bottom: -2px;
+          left: -2px;
+          outline-color: ButtonText;
+          right: -2px;
+          top: -2px;
+        }
+        &:active > * {
+          left: 0px;
+          position: relative;
+          top: 0px;
+        }
+        &:hover {
+          background-color: #eaeaea;
+          color: #212121;
+        }
+        @media screen and (-ms-high-contrast: active){&:hover {
+          border-color: Highlight;
+          color: Highlight;
         }
+        &:active {
+          background-color: #c8c8c8;
+          color: #212121;
+        }
+    data-is-focusable={true}
+    onClick={[Function]}
+    onKeyDown={[Function]}
+    onKeyPress={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    type="button"
   >
-    <button
+    <div
       className=
-          ms-Button
-          ms-Button--default
+          ms-Button-flexContainer
           {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            background-color: #f4f4f4;
-            border-radius: 0px;
-            border: 1px solid transparent;
-            box-sizing: border-box;
-            color: #333333;
-            cursor: pointer;
-            display: inline-block;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            height: 32px;
-            min-width: 80px;
-            outline: transparent;
-            padding-bottom: 0;
-            padding-left: 16px;
-            padding-right: 16px;
-            padding-top: 0;
-            position: relative;
-            text-align: center;
-            text-decoration: none;
-            user-select: none;
-            vertical-align: top;
-          }
-          &::-moz-focus-inner {
-            border: 0;
-          }
-          .ms-Fabric--isFocusVisible &:focus:after {
-            border: 1px solid #ffffff;
-            bottom: 0px;
-            content: "";
-            left: 0px;
-            outline: 1px solid #666666;
-            position: absolute;
-            right: 0px;
-            top: 0px;
-            z-index: 1;
-          }
-          @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-            border: none;
-            bottom: -2px;
-            left: -2px;
-            outline-color: ButtonText;
-            right: -2px;
-            top: -2px;
-          }
-          &:active > * {
-            left: 0px;
-            position: relative;
-            top: 0px;
-          }
-          &:hover {
-            background-color: #eaeaea;
-            color: #212121;
-          }
-          @media screen and (-ms-high-contrast: active){&:hover {
-            border-color: Highlight;
-            color: Highlight;
-          }
-          &:active {
-            background-color: #c8c8c8;
-            color: #212121;
+            align-items: center;
+            display: flex;
+            flex-wrap: nowrap;
+            height: 100%;
+            justify-content: center;
           }
-      data-is-focusable={true}
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      onKeyPress={[Function]}
-      onKeyUp={[Function]}
-      onMouseDown={[Function]}
-      onMouseUp={[Function]}
-      type="button"
     >
       <div
         className=
-            ms-Button-flexContainer
+            ms-Button-textContainer
             {
-              align-items: center;
-              display: flex;
-              flex-wrap: nowrap;
-              height: 100%;
-              justify-content: center;
+              flex-grow: 1;
             }
       >
         <div
           className=
-              ms-Button-textContainer
+              ms-Button-label
               {
-                flex-grow: 1;
+                font-weight: 600;
+                line-height: 100%;
+                margin-bottom: 0;
+                margin-left: 4px;
+                margin-right: 4px;
+                margin-top: 0;
               }
+          id="id__0"
         >
-          <div
-            className=
-                ms-Button-label
-                {
-                  font-weight: 600;
-                  line-height: 100%;
-                  margin-bottom: 0;
-                  margin-left: 4px;
-                  margin-right: 4px;
-                  margin-top: 0;
-                }
-            id="id__0"
-          >
-            One
-          </div>
+          Randomize
         </div>
       </div>
-    </button>
+    </div>
+  </button>
+  <div
+    className=
+        ms-Stack
+        {
+          align-items: flex-start;
+          border: 2px solid transparent;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: column;
+          flex-wrap: nowrap;
+          height: auto;
+          padding-bottom: 10px;
+          padding-left: 10px;
+          padding-right: 10px;
+          padding-top: 10px;
+          width: auto;
+        }
+        & > * {
+          text-overflow: ellipsis;
+        }
+        & > *:not(:first-child) {
+          margin-top: 10px;
+        }
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 1;
+        }
+  >
     <div
       className=
           ms-Toggle
@@ -167,7 +184,7 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
             }
         htmlFor="Toggle3"
       >
-        Focus Trap Zone
+        Enable trap zone 1
       </label>
       <div
         className=
@@ -289,131 +306,147 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
         </label>
       </div>
     </div>
-    <div
+    <button
       className=
-
+          ms-Button
+          ms-Button--default
           {
-            border: 2px solid black;
-            padding-bottom: 5px;
-            padding-left: 5px;
-            padding-right: 5px;
-            padding-top: 5px;
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            background-color: #f4f4f4;
+            border-radius: 0px;
+            border: 1px solid transparent;
+            box-sizing: border-box;
+            color: #333333;
+            cursor: pointer;
+            display: inline-block;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            height: 32px;
+            min-width: 80px;
+            outline: transparent;
+            padding-bottom: 0;
+            padding-left: 16px;
+            padding-right: 16px;
+            padding-top: 0;
+            position: relative;
+            text-align: center;
+            text-decoration: none;
+            user-select: none;
+            vertical-align: top;
           }
-    >
-      <button
-        className=
-            ms-Button
-            ms-Button--default
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              background-color: #f4f4f4;
-              border-radius: 0px;
-              border: 1px solid transparent;
-              box-sizing: border-box;
-              color: #333333;
-              cursor: pointer;
-              display: inline-block;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              height: 32px;
-              min-width: 80px;
-              outline: transparent;
-              padding-bottom: 0;
-              padding-left: 16px;
-              padding-right: 16px;
-              padding-top: 0;
-              position: relative;
-              text-align: center;
-              text-decoration: none;
-              user-select: none;
-              vertical-align: top;
-            }
-            &::-moz-focus-inner {
-              border: 0;
-            }
-            .ms-Fabric--isFocusVisible &:focus:after {
-              border: 1px solid #ffffff;
-              bottom: 0px;
-              content: "";
-              left: 0px;
-              outline: 1px solid #666666;
-              position: absolute;
-              right: 0px;
-              top: 0px;
-              z-index: 1;
-            }
-            @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-              border: none;
-              bottom: -2px;
-              left: -2px;
-              outline-color: ButtonText;
-              right: -2px;
-              top: -2px;
-            }
-            &:active > * {
-              left: 0px;
-              position: relative;
-              top: 0px;
-            }
-            &:hover {
-              background-color: #eaeaea;
-              color: #212121;
-            }
-            @media screen and (-ms-high-contrast: active){&:hover {
-              border-color: Highlight;
-              color: Highlight;
-            }
-            &:active {
-              background-color: #c8c8c8;
-              color: #212121;
+          &::-moz-focus-inner {
+            border: 0;
+          }
+          .ms-Fabric--isFocusVisible &:focus:after {
+            border: 1px solid #ffffff;
+            bottom: 0px;
+            content: "";
+            left: 0px;
+            outline: 1px solid #666666;
+            position: absolute;
+            right: 0px;
+            top: 0px;
+            z-index: 1;
+          }
+          @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+            border: none;
+            bottom: -2px;
+            left: -2px;
+            outline-color: ButtonText;
+            right: -2px;
+            top: -2px;
+          }
+          &:active > * {
+            left: 0px;
+            position: relative;
+            top: 0px;
+          }
+          &:hover {
+            background-color: #eaeaea;
+            color: #212121;
+          }
+          @media screen and (-ms-high-contrast: active){&:hover {
+            border-color: Highlight;
+            color: Highlight;
+          }
+          &:active {
+            background-color: #c8c8c8;
+            color: #212121;
+          }
+      data-is-focusable={true}
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onKeyPress={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+      type="button"
+    >
+      <div
+        className=
+            ms-Button-flexContainer
+            {
+              align-items: center;
+              display: flex;
+              flex-wrap: nowrap;
+              height: 100%;
+              justify-content: center;
             }
-        data-is-focusable={true}
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        onKeyPress={[Function]}
-        onKeyUp={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        type="button"
       >
         <div
           className=
-              ms-Button-flexContainer
+              ms-Button-textContainer
               {
-                align-items: center;
-                display: flex;
-                flex-wrap: nowrap;
-                height: 100%;
-                justify-content: center;
+                flex-grow: 1;
               }
         >
           <div
             className=
-                ms-Button-textContainer
+                ms-Button-label
                 {
-                  flex-grow: 1;
+                  font-weight: 600;
+                  line-height: 100%;
+                  margin-bottom: 0;
+                  margin-left: 4px;
+                  margin-right: 4px;
+                  margin-top: 0;
                 }
+            id="id__4"
           >
-            <div
-              className=
-                  ms-Button-label
-                  {
-                    font-weight: 600;
-                    line-height: 100%;
-                    margin-bottom: 0;
-                    margin-left: 4px;
-                    margin-right: 4px;
-                    margin-top: 0;
-                  }
-              id="id__4"
-            >
-              Two
-            </div>
+            Zone 1 button
           </div>
         </div>
-      </button>
+      </div>
+    </button>
+    <div
+      className=
+          ms-Stack
+          {
+            border: 2px solid transparent;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            height: auto;
+            justify-content: flex-start;
+            padding-bottom: 10px;
+            padding-left: 10px;
+            padding-right: 10px;
+            padding-top: 10px;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+          }
+          & > *:not(:first-child) {
+            margin-left: 10px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 1;
+          }
+    >
       <div
         className=
             ms-Toggle
@@ -425,6 +458,7 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
               font-size: 14px;
               font-weight: 400;
               margin-bottom: 8px;
+              width: 200px;
             }
       >
         <label
@@ -454,7 +488,7 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
               }
           htmlFor="Toggle7"
         >
-          Focus Trap Zone
+          Enable trap zone 2
         </label>
         <div
           className=
@@ -576,131 +610,147 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
           </label>
         </div>
       </div>
-      <div
+      <button
         className=
-
+            ms-Button
+            ms-Button--default
             {
-              border: 2px solid black;
-              padding-bottom: 5px;
-              padding-left: 5px;
-              padding-right: 5px;
-              padding-top: 5px;
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              background-color: #f4f4f4;
+              border-radius: 0px;
+              border: 1px solid transparent;
+              box-sizing: border-box;
+              color: #333333;
+              cursor: pointer;
+              display: inline-block;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              height: 32px;
+              min-width: 80px;
+              outline: transparent;
+              padding-bottom: 0;
+              padding-left: 16px;
+              padding-right: 16px;
+              padding-top: 0;
+              position: relative;
+              text-align: center;
+              text-decoration: none;
+              user-select: none;
+              vertical-align: top;
             }
-      >
-        <button
-          className=
-              ms-Button
-              ms-Button--default
-              {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
-                background-color: #f4f4f4;
-                border-radius: 0px;
-                border: 1px solid transparent;
-                box-sizing: border-box;
-                color: #333333;
-                cursor: pointer;
-                display: inline-block;
-                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                font-size: 14px;
-                font-weight: 400;
-                height: 32px;
-                min-width: 80px;
-                outline: transparent;
-                padding-bottom: 0;
-                padding-left: 16px;
-                padding-right: 16px;
-                padding-top: 0;
-                position: relative;
-                text-align: center;
-                text-decoration: none;
-                user-select: none;
-                vertical-align: top;
-              }
-              &::-moz-focus-inner {
-                border: 0;
-              }
-              .ms-Fabric--isFocusVisible &:focus:after {
-                border: 1px solid #ffffff;
-                bottom: 0px;
-                content: "";
-                left: 0px;
-                outline: 1px solid #666666;
-                position: absolute;
-                right: 0px;
-                top: 0px;
-                z-index: 1;
-              }
-              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-                border: none;
-                bottom: -2px;
-                left: -2px;
-                outline-color: ButtonText;
-                right: -2px;
-                top: -2px;
-              }
-              &:active > * {
-                left: 0px;
-                position: relative;
-                top: 0px;
-              }
-              &:hover {
-                background-color: #eaeaea;
-                color: #212121;
-              }
-              @media screen and (-ms-high-contrast: active){&:hover {
-                border-color: Highlight;
-                color: Highlight;
-              }
-              &:active {
-                background-color: #c8c8c8;
-                color: #212121;
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid #ffffff;
+              bottom: 0px;
+              content: "";
+              left: 0px;
+              outline: 1px solid #666666;
+              position: absolute;
+              right: 0px;
+              top: 0px;
+              z-index: 1;
+            }
+            @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+              border: none;
+              bottom: -2px;
+              left: -2px;
+              outline-color: ButtonText;
+              right: -2px;
+              top: -2px;
+            }
+            &:active > * {
+              left: 0px;
+              position: relative;
+              top: 0px;
+            }
+            &:hover {
+              background-color: #eaeaea;
+              color: #212121;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover {
+              border-color: Highlight;
+              color: Highlight;
+            }
+            &:active {
+              background-color: #c8c8c8;
+              color: #212121;
+            }
+        data-is-focusable={true}
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        onKeyPress={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        type="button"
+      >
+        <div
+          className=
+              ms-Button-flexContainer
+              {
+                align-items: center;
+                display: flex;
+                flex-wrap: nowrap;
+                height: 100%;
+                justify-content: center;
               }
-          data-is-focusable={true}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          onKeyPress={[Function]}
-          onKeyUp={[Function]}
-          onMouseDown={[Function]}
-          onMouseUp={[Function]}
-          type="button"
         >
           <div
             className=
-                ms-Button-flexContainer
+                ms-Button-textContainer
                 {
-                  align-items: center;
-                  display: flex;
-                  flex-wrap: nowrap;
-                  height: 100%;
-                  justify-content: center;
+                  flex-grow: 1;
                 }
           >
             <div
               className=
-                  ms-Button-textContainer
+                  ms-Button-label
                   {
-                    flex-grow: 1;
+                    font-weight: 600;
+                    line-height: 100%;
+                    margin-bottom: 0;
+                    margin-left: 4px;
+                    margin-right: 4px;
+                    margin-top: 0;
                   }
+              id="id__8"
             >
-              <div
-                className=
-                    ms-Button-label
-                    {
-                      font-weight: 600;
-                      line-height: 100%;
-                      margin-bottom: 0;
-                      margin-left: 4px;
-                      margin-right: 4px;
-                      margin-top: 0;
-                    }
-                id="id__8"
-              >
-                Three
-              </div>
+              Zone 2 button
             </div>
           </div>
-        </button>
+        </div>
+      </button>
+      <div
+        className=
+            ms-Stack
+            {
+              align-items: flex-start;
+              border: 2px solid transparent;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: auto;
+              padding-bottom: 10px;
+              padding-left: 10px;
+              padding-right: 10px;
+              padding-top: 10px;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+            }
+            & > *:not(:first-child) {
+              margin-top: 10px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 1;
+            }
+      >
         <div
           className=
               ms-Toggle
@@ -712,6 +762,7 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
                 font-size: 14px;
                 font-weight: 400;
                 margin-bottom: 8px;
+                width: 200px;
               }
         >
           <label
@@ -741,7 +792,7 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
                 }
             htmlFor="Toggle11"
           >
-            Focus Trap Zone
+            Enable trap zone 3
           </label>
           <div
             className=
@@ -863,18 +914,6 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
             </label>
           </div>
         </div>
-      </div>
-      <div
-        className=
-
-            {
-              border: 2px solid black;
-              padding-bottom: 5px;
-              padding-left: 5px;
-              padding-right: 5px;
-              padding-top: 5px;
-            }
-      >
         <button
           className=
               ms-Button
@@ -984,11 +1023,39 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
                     }
                 id="id__12"
               >
-                Four
+                Zone 3 button
               </div>
             </div>
           </div>
         </button>
+      </div>
+      <div
+        className=
+            ms-Stack
+            {
+              align-items: flex-start;
+              border: 2px solid transparent;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              height: auto;
+              padding-bottom: 10px;
+              padding-left: 10px;
+              padding-right: 10px;
+              padding-top: 10px;
+              width: auto;
+            }
+            & > * {
+              text-overflow: ellipsis;
+            }
+            & > *:not(:first-child) {
+              margin-top: 10px;
+            }
+            & > *:not(.ms-StackItem) {
+              flex-shrink: 1;
+            }
+      >
         <div
           className=
               ms-Toggle
@@ -1000,6 +1067,7 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
                 font-size: 14px;
                 font-weight: 400;
                 margin-bottom: 8px;
+                width: 200px;
               }
         >
           <label
@@ -1029,7 +1097,7 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
                 }
             htmlFor="Toggle15"
           >
-            Focus Trap Zone
+            Enable trap zone 4
           </label>
           <div
             className=
@@ -1151,133 +1219,149 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
             </label>
           </div>
         </div>
-      </div>
-    </div>
-    <div
-      className=
-
-          {
-            border: 2px solid black;
-            padding-bottom: 5px;
-            padding-left: 5px;
-            padding-right: 5px;
-            padding-top: 5px;
-          }
-    >
-      <button
-        className=
-            ms-Button
-            ms-Button--default
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              background-color: #f4f4f4;
-              border-radius: 0px;
-              border: 1px solid transparent;
-              box-sizing: border-box;
-              color: #333333;
-              cursor: pointer;
-              display: inline-block;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              height: 32px;
-              min-width: 80px;
-              outline: transparent;
-              padding-bottom: 0;
-              padding-left: 16px;
-              padding-right: 16px;
-              padding-top: 0;
-              position: relative;
-              text-align: center;
-              text-decoration: none;
-              user-select: none;
-              vertical-align: top;
-            }
-            &::-moz-focus-inner {
-              border: 0;
-            }
-            .ms-Fabric--isFocusVisible &:focus:after {
-              border: 1px solid #ffffff;
-              bottom: 0px;
-              content: "";
-              left: 0px;
-              outline: 1px solid #666666;
-              position: absolute;
-              right: 0px;
-              top: 0px;
-              z-index: 1;
-            }
-            @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-              border: none;
-              bottom: -2px;
-              left: -2px;
-              outline-color: ButtonText;
-              right: -2px;
-              top: -2px;
-            }
-            &:active > * {
-              left: 0px;
-              position: relative;
-              top: 0px;
-            }
-            &:hover {
-              background-color: #eaeaea;
-              color: #212121;
-            }
-            @media screen and (-ms-high-contrast: active){&:hover {
-              border-color: Highlight;
-              color: Highlight;
-            }
-            &:active {
-              background-color: #c8c8c8;
-              color: #212121;
-            }
-        data-is-focusable={true}
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        onKeyPress={[Function]}
-        onKeyUp={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        type="button"
-      >
-        <div
+        <button
           className=
-              ms-Button-flexContainer
+              ms-Button
+              ms-Button--default
               {
-                align-items: center;
-                display: flex;
-                flex-wrap: nowrap;
-                height: 100%;
-                justify-content: center;
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                background-color: #f4f4f4;
+                border-radius: 0px;
+                border: 1px solid transparent;
+                box-sizing: border-box;
+                color: #333333;
+                cursor: pointer;
+                display: inline-block;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                height: 32px;
+                min-width: 80px;
+                outline: transparent;
+                padding-bottom: 0;
+                padding-left: 16px;
+                padding-right: 16px;
+                padding-top: 0;
+                position: relative;
+                text-align: center;
+                text-decoration: none;
+                user-select: none;
+                vertical-align: top;
+              }
+              &::-moz-focus-inner {
+                border: 0;
+              }
+              .ms-Fabric--isFocusVisible &:focus:after {
+                border: 1px solid #ffffff;
+                bottom: 0px;
+                content: "";
+                left: 0px;
+                outline: 1px solid #666666;
+                position: absolute;
+                right: 0px;
+                top: 0px;
+                z-index: 1;
+              }
+              @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+                border: none;
+                bottom: -2px;
+                left: -2px;
+                outline-color: ButtonText;
+                right: -2px;
+                top: -2px;
+              }
+              &:active > * {
+                left: 0px;
+                position: relative;
+                top: 0px;
+              }
+              &:hover {
+                background-color: #eaeaea;
+                color: #212121;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover {
+                border-color: Highlight;
+                color: Highlight;
+              }
+              &:active {
+                background-color: #c8c8c8;
+                color: #212121;
               }
+          data-is-focusable={true}
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          onKeyPress={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          type="button"
         >
           <div
             className=
-                ms-Button-textContainer
+                ms-Button-flexContainer
                 {
-                  flex-grow: 1;
+                  align-items: center;
+                  display: flex;
+                  flex-wrap: nowrap;
+                  height: 100%;
+                  justify-content: center;
                 }
           >
             <div
               className=
-                  ms-Button-label
+                  ms-Button-textContainer
                   {
-                    font-weight: 600;
-                    line-height: 100%;
-                    margin-bottom: 0;
-                    margin-left: 4px;
-                    margin-right: 4px;
-                    margin-top: 0;
+                    flex-grow: 1;
                   }
-              id="id__16"
             >
-              Five
+              <div
+                className=
+                    ms-Button-label
+                    {
+                      font-weight: 600;
+                      line-height: 100%;
+                      margin-bottom: 0;
+                      margin-left: 4px;
+                      margin-right: 4px;
+                      margin-top: 0;
+                    }
+                id="id__16"
+              >
+                Zone 4 button
+              </div>
             </div>
           </div>
-        </div>
-      </button>
+        </button>
+      </div>
+    </div>
+    <div
+      className=
+          ms-Stack
+          {
+            align-items: flex-start;
+            border: 2px solid transparent;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            height: auto;
+            padding-bottom: 10px;
+            padding-left: 10px;
+            padding-right: 10px;
+            padding-top: 10px;
+            width: auto;
+          }
+          & > * {
+            text-overflow: ellipsis;
+          }
+          & > *:not(:first-child) {
+            margin-top: 10px;
+          }
+          & > *:not(.ms-StackItem) {
+            flex-shrink: 1;
+          }
+    >
       <div
         className=
             ms-Toggle
@@ -1318,7 +1402,7 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
               }
           htmlFor="Toggle19"
         >
-          Focus Trap Zone
+          Enable trap zone 5
         </label>
         <div
           className=
@@ -1440,121 +1524,121 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1
           </label>
         </div>
       </div>
-    </div>
-  </div>
-  <button
-    className=
-        ms-Button
-        ms-Button--default
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          background-color: #f4f4f4;
-          border-radius: 0px;
-          border: 1px solid transparent;
-          box-sizing: border-box;
-          color: #333333;
-          cursor: pointer;
-          display: inline-block;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: 32px;
-          min-width: 80px;
-          outline: transparent;
-          padding-bottom: 0;
-          padding-left: 16px;
-          padding-right: 16px;
-          padding-top: 0;
-          position: relative;
-          text-align: center;
-          text-decoration: none;
-          user-select: none;
-          vertical-align: top;
-        }
-        &::-moz-focus-inner {
-          border: 0;
-        }
-        .ms-Fabric--isFocusVisible &:focus:after {
-          border: 1px solid #ffffff;
-          bottom: 0px;
-          content: "";
-          left: 0px;
-          outline: 1px solid #666666;
-          position: absolute;
-          right: 0px;
-          top: 0px;
-          z-index: 1;
-        }
-        @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-          border: none;
-          bottom: -2px;
-          left: -2px;
-          outline-color: ButtonText;
-          right: -2px;
-          top: -2px;
-        }
-        &:active > * {
-          left: 0px;
-          position: relative;
-          top: 0px;
-        }
-        &:hover {
-          background-color: #eaeaea;
-          color: #212121;
-        }
-        @media screen and (-ms-high-contrast: active){&:hover {
-          border-color: Highlight;
-          color: Highlight;
-        }
-        &:active {
-          background-color: #c8c8c8;
-          color: #212121;
-        }
-    data-is-focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyPress={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    onMouseUp={[Function]}
-    type="button"
-  >
-    <div
-      className=
-          ms-Button-flexContainer
-          {
-            align-items: center;
-            display: flex;
-            flex-wrap: nowrap;
-            height: 100%;
-            justify-content: center;
-          }
-    >
-      <div
+      <button
         className=
-            ms-Button-textContainer
+            ms-Button
+            ms-Button--default
             {
-              flex-grow: 1;
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              background-color: #f4f4f4;
+              border-radius: 0px;
+              border: 1px solid transparent;
+              box-sizing: border-box;
+              color: #333333;
+              cursor: pointer;
+              display: inline-block;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              height: 32px;
+              min-width: 80px;
+              outline: transparent;
+              padding-bottom: 0;
+              padding-left: 16px;
+              padding-right: 16px;
+              padding-top: 0;
+              position: relative;
+              text-align: center;
+              text-decoration: none;
+              user-select: none;
+              vertical-align: top;
+            }
+            &::-moz-focus-inner {
+              border: 0;
+            }
+            .ms-Fabric--isFocusVisible &:focus:after {
+              border: 1px solid #ffffff;
+              bottom: 0px;
+              content: "";
+              left: 0px;
+              outline: 1px solid #666666;
+              position: absolute;
+              right: 0px;
+              top: 0px;
+              z-index: 1;
+            }
+            @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
+              border: none;
+              bottom: -2px;
+              left: -2px;
+              outline-color: ButtonText;
+              right: -2px;
+              top: -2px;
             }
+            &:active > * {
+              left: 0px;
+              position: relative;
+              top: 0px;
+            }
+            &:hover {
+              background-color: #eaeaea;
+              color: #212121;
+            }
+            @media screen and (-ms-high-contrast: active){&:hover {
+              border-color: Highlight;
+              color: Highlight;
+            }
+            &:active {
+              background-color: #c8c8c8;
+              color: #212121;
+            }
+        data-is-focusable={true}
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        onKeyPress={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        type="button"
       >
         <div
           className=
-              ms-Button-label
+              ms-Button-flexContainer
               {
-                font-weight: 600;
-                line-height: 100%;
-                margin-bottom: 0;
-                margin-left: 4px;
-                margin-right: 4px;
-                margin-top: 0;
+                align-items: center;
+                display: flex;
+                flex-wrap: nowrap;
+                height: 100%;
+                justify-content: center;
               }
-          id="id__20"
         >
-          Randomize
+          <div
+            className=
+                ms-Button-textContainer
+                {
+                  flex-grow: 1;
+                }
+          >
+            <div
+              className=
+                  ms-Button-label
+                  {
+                    font-weight: 600;
+                    line-height: 100%;
+                    margin-bottom: 0;
+                    margin-left: 4px;
+                    margin-right: 4px;
+                    margin-top: 0;
+                  }
+              id="id__20"
+            >
+              Zone 5 button
+            </div>
+          </div>
         </div>
-      </div>
+      </button>
     </div>
-  </button>
+  </div>
 </div>
 `;
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.NoTabbable.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.NoTabbable.Example.tsx.shot
index d5bab1cbf30cc..21af1f30eeb22 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.NoTabbable.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.NoTabbable.Example.tsx.shot
@@ -2,138 +2,57 @@
 
 exports[`Component Examples renders FocusTrapZone.NoTabbable.Example.tsx correctly 1`] = `
 <div>
-  <button
-    aria-describedby="id__1"
-    aria-labelledby="id__0"
+  <div
     className=
-        ms-Button
-        ms-Button--default
+        ms-Stack
         {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          background-color: #f4f4f4;
-          border-radius: 0px;
-          border: 1px solid transparent;
+          align-items: flex-start;
+          border: 2px solid transparent;
           box-sizing: border-box;
-          color: #333333;
-          cursor: pointer;
-          display: inline-block;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: 32px;
-          min-width: 80px;
-          outline: transparent;
-          padding-bottom: 0;
-          padding-left: 16px;
-          padding-right: 16px;
-          padding-top: 0;
-          position: relative;
-          text-align: center;
-          text-decoration: none;
-          user-select: none;
-          vertical-align: top;
+          display: flex;
+          flex-direction: column;
+          flex-wrap: nowrap;
+          height: auto;
+          padding-bottom: 10px;
+          padding-left: 10px;
+          padding-right: 10px;
+          padding-top: 10px;
+          width: auto;
         }
-        &::-moz-focus-inner {
-          border: 0;
+        & > * {
+          text-overflow: ellipsis;
         }
-        .ms-Fabric--isFocusVisible &:focus:after {
-          border: 1px solid #ffffff;
-          bottom: 0px;
-          content: "";
-          left: 0px;
-          outline: 1px solid #666666;
-          position: absolute;
-          right: 0px;
-          top: 0px;
-          z-index: 1;
+        & > *:not(:first-child) {
+          margin-top: 15px;
         }
-        @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus:after {
-          border: none;
-          bottom: -2px;
-          left: -2px;
-          outline-color: ButtonText;
-          right: -2px;
-          top: -2px;
+        & > *:not(.ms-StackItem) {
+          flex-shrink: 1;
         }
-        &:active > * {
-          left: 0px;
-          position: relative;
-          top: 0px;
-        }
-        &:hover {
-          background-color: #eaeaea;
-          color: #212121;
-        }
-        @media screen and (-ms-high-contrast: active){&:hover {
-          border-color: Highlight;
-          color: Highlight;
-        }
-        &:active {
-          background-color: #c8c8c8;
-          color: #212121;
-        }
-    data-is-focusable={true}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyPress={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    onMouseUp={[Function]}
-    type="button"
   >
     <div
       className=
-          ms-Button-flexContainer
-          {
-            align-items: center;
-            display: flex;
-            flex-wrap: nowrap;
-            height: 100%;
-            justify-content: center;
-          }
-    >
-      <div
-        className=
-            ms-Button-textContainer
-            {
-              flex-grow: 1;
-            }
-      >
-        <div
-          className=
-              ms-Button-label
-              {
-                font-weight: 600;
-                line-height: 100%;
-                margin-bottom: 0;
-                margin-left: 4px;
-                margin-right: 4px;
-                margin-top: 0;
-              }
-          id="id__0"
-        >
-          Go to Trap Zone
-        </div>
-      </div>
-    </div>
-  </button>
-  <div>
-    <div
-      className=
-
+          ms-Toggle
+          is-enabled
           {
-            border: 1px dashed #ababab;
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            margin-bottom: 8px;
           }
     >
-      <div
+      <label
         className=
-            ms-TextField
+            ms-Label
+            ms-Toggle-label
             {
               -moz-osx-font-smoothing: grayscale;
               -webkit-font-smoothing: antialiased;
               box-shadow: none;
               box-sizing: border-box;
+              color: #333333;
+              display: block;
               font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
               font-size: 14px;
               font-weight: 400;
@@ -141,497 +60,457 @@ exports[`Component Examples renders FocusTrapZone.NoTabbable.Example.tsx correct
               margin-left: 0px;
               margin-right: 0px;
               margin-top: 0px;
-              padding-bottom: 0px;
-              padding-left: 0px;
-              padding-right: 0px;
-              padding-top: 0px;
+              overflow-wrap: break-word;
+              padding-bottom: 5px;
+              padding-left: 0;
+              padding-right: 0;
+              padding-top: 5px;
+              word-wrap: break-word;
+            }
+        htmlFor="Toggle0"
+      >
+        Use trap zone
+      </label>
+      <div
+        className=
+            ms-Toggle-innerContainer
+            {
+              display: inline-flex;
               position: relative;
             }
       >
-        <div
+        <button
+          aria-checked={false}
+          checked={false}
           className=
-              ms-TextField-wrapper
-
+              ms-Toggle-background
+              {
+                align-items: center;
+                background: #ffffff;
+                border-color: #666666;
+                border-radius: 1em;
+                border-style: solid;
+                border-width: 1px;
+                box-sizing: border-box;
+                cursor: pointer;
+                display: flex;
+                font-size: 20px;
+                height: 1em;
+                outline: transparent;
+                padding-bottom: 0;
+                padding-left: .2em;
+                padding-right: .2em;
+                padding-top: 0;
+                position: relative;
+                transition: all 0.1s ease;
+                width: 2.2em;
+              }
+              &::-moz-focus-inner {
+                border: 0;
+              }
+              .ms-Fabric--isFocusVisible &:focus:after {
+                border: 1px solid #ffffff;
+                bottom: -2px;
+                content: "";
+                left: -2px;
+                outline: 1px solid #666666;
+                position: absolute;
+                right: -2px;
+                top: -2px;
+                z-index: 1;
+              }
+              &:hover {
+                border-color: #333333;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
+                border-color: Highlight;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover {
+                border-color: Highlight;
+              }
+          data-is-focusable={true}
+          id="Toggle0"
+          onChange={[Function]}
+          onClick={[Function]}
+          role="switch"
+          type="button"
         >
           <div
             className=
-                ms-TextField-fieldGroup
+                ms-Toggle-thumb
                 {
-                  align-items: stretch;
-                  background: #ffffff;
-                  border: 1px solid #a6a6a6;
-                  box-shadow: none;
+                  background-color: #333333;
+                  border-color: transparent;
+                  border-radius: .5em;
+                  border-style: solid;
+                  border-width: .28em;
                   box-sizing: border-box;
-                  cursor: text;
-                  display: flex;
-                  flex-direction: row;
-                  height: 32px;
-                  margin-bottom: 0px;
-                  margin-left: 0px;
-                  margin-right: 0px;
-                  margin-top: 0px;
-                  padding-bottom: 0px;
-                  padding-left: 0px;
-                  padding-right: 0px;
-                  padding-top: 0px;
-                  position: relative;
-                }
-                &:hover {
-                  border-color: #333333;
-                }
-                @media screen and (-ms-high-contrast: active){&:hover {
-                  border-color: Highlight;
+                  height: .5em;
+                  transition: all 0.1s ease;
+                  width: .5em;
                 }
-          >
-            <input
-              aria-invalid={false}
-              className=
-                  ms-TextField-field
-                  {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    background-color: transparent;
-                    background: none;
-                    border-radius: 0px;
-                    border: none;
-                    box-shadow: none;
-                    box-sizing: border-box;
-                    color: #333333;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    margin-bottom: 0px;
-                    margin-left: 0px;
-                    margin-right: 0px;
-                    margin-top: 0px;
-                    min-width: 0px;
-                    outline: 0px;
-                    padding-bottom: 0;
-                    padding-left: 12px;
-                    padding-right: 12px;
-                    padding-top: 0;
-                    text-overflow: ellipsis;
-                    width: 100%;
-                  }
-                  &:active, &:focus, &:hover {
-                    outline: 0px;
-                  }
-                  &::-ms-clear {
-                    display: none;
-                  }
-                  &::placeholder {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #666666;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    opacity: 1;
-                  }
-                  &:-ms-input-placeholder {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #666666;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    opacity: 1;
-                  }
-              id="TextField3"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              onInput={[Function]}
-              placeholder="Not tabbable"
-              tabIndex={-1}
-              type="text"
-              value=""
-            />
-          </div>
-        </div>
+          />
+        </button>
+        <label
+          className=
+              ms-Label
+              ms-Toggle-stateText
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                box-shadow: none;
+                box-sizing: border-box;
+                color: #333333;
+                display: block;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                overflow-wrap: break-word;
+                padding-bottom: 5px;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 5px;
+                word-wrap: break-word;
+              }
+              && {
+                margin-bottom: 0;
+                margin-left: 8px;
+                margin-right: 8px;
+                margin-top: 0;
+                padding-bottom: 0;
+                padding-left: 0;
+                padding-right: 0;
+                padding-top: 0;
+                user-select: none;
+              }
+        >
+          Off
+        </label>
       </div>
+    </div>
+    <div
+      className=
+          ms-TextField
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            box-shadow: none;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            margin-bottom: 0px;
+            margin-left: 0px;
+            margin-right: 0px;
+            margin-top: 0px;
+            padding-bottom: 0px;
+            padding-left: 0px;
+            padding-right: 0px;
+            padding-top: 0px;
+            position: relative;
+          }
+    >
       <div
         className=
-            ms-TextField
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              box-shadow: none;
-              box-sizing: border-box;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              margin-bottom: 0px;
-              margin-left: 0px;
-              margin-right: 0px;
-              margin-top: 0px;
-              padding-bottom: 0px;
-              padding-left: 0px;
-              padding-right: 0px;
-              padding-top: 0px;
-              position: relative;
-            }
+            ms-TextField-wrapper
+
       >
         <div
           className=
-              ms-TextField-wrapper
-
+              ms-TextField-fieldGroup
+              {
+                align-items: stretch;
+                background: #ffffff;
+                border: 1px solid #a6a6a6;
+                box-shadow: none;
+                box-sizing: border-box;
+                cursor: text;
+                display: flex;
+                flex-direction: row;
+                height: 32px;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
+                position: relative;
+              }
+              &:hover {
+                border-color: #333333;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover {
+                border-color: Highlight;
+              }
         >
-          <div
+          <input
+            aria-invalid={false}
             className=
-                ms-TextField-fieldGroup
+                ms-TextField-field
                 {
-                  align-items: stretch;
-                  background: #ffffff;
-                  border: 1px solid #a6a6a6;
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  background-color: transparent;
+                  background: none;
+                  border-radius: 0px;
+                  border: none;
                   box-shadow: none;
                   box-sizing: border-box;
-                  cursor: text;
-                  display: flex;
-                  flex-direction: row;
-                  height: 32px;
+                  color: #333333;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
                   margin-bottom: 0px;
                   margin-left: 0px;
                   margin-right: 0px;
                   margin-top: 0px;
-                  padding-bottom: 0px;
-                  padding-left: 0px;
-                  padding-right: 0px;
-                  padding-top: 0px;
-                  position: relative;
+                  min-width: 0px;
+                  outline: 0px;
+                  padding-bottom: 0;
+                  padding-left: 12px;
+                  padding-right: 12px;
+                  padding-top: 0;
+                  text-overflow: ellipsis;
+                  width: 100%;
                 }
-                &:hover {
-                  border-color: #333333;
+                &:active, &:focus, &:hover {
+                  outline: 0px;
                 }
-                @media screen and (-ms-high-contrast: active){&:hover {
-                  border-color: Highlight;
+                &::-ms-clear {
+                  display: none;
                 }
-          >
-            <input
-              aria-invalid={false}
-              className=
-                  ms-TextField-field
-                  {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    background-color: transparent;
-                    background: none;
-                    border-radius: 0px;
-                    border: none;
-                    box-shadow: none;
-                    box-sizing: border-box;
-                    color: #333333;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    margin-bottom: 0px;
-                    margin-left: 0px;
-                    margin-right: 0px;
-                    margin-top: 0px;
-                    min-width: 0px;
-                    outline: 0px;
-                    padding-bottom: 0;
-                    padding-left: 12px;
-                    padding-right: 12px;
-                    padding-top: 0;
-                    text-overflow: ellipsis;
-                    width: 100%;
-                  }
-                  &:active, &:focus, &:hover {
-                    outline: 0px;
-                  }
-                  &::-ms-clear {
-                    display: none;
-                  }
-                  &::placeholder {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #666666;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    opacity: 1;
-                  }
-                  &:-ms-input-placeholder {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #666666;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    opacity: 1;
-                  }
-              id="TextField5"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              onInput={[Function]}
-              placeholder="Not tabbable"
-              tabIndex={-1}
-              type="text"
-              value=""
-            />
-          </div>
+                &::placeholder {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  color: #666666;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  opacity: 1;
+                }
+                &:-ms-input-placeholder {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  color: #666666;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  opacity: 1;
+                }
+            id="TextField1"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onInput={[Function]}
+            placeholder="Not tabbable"
+            tabIndex={-1}
+            type="text"
+            value=""
+          />
         </div>
       </div>
+    </div>
+    <div
+      className=
+          ms-TextField
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            box-shadow: none;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            margin-bottom: 0px;
+            margin-left: 0px;
+            margin-right: 0px;
+            margin-top: 0px;
+            padding-bottom: 0px;
+            padding-left: 0px;
+            padding-right: 0px;
+            padding-top: 0px;
+            position: relative;
+          }
+    >
       <div
         className=
-            ms-TextField
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              box-shadow: none;
-              box-sizing: border-box;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              margin-bottom: 0px;
-              margin-left: 0px;
-              margin-right: 0px;
-              margin-top: 0px;
-              padding-bottom: 0px;
-              padding-left: 0px;
-              padding-right: 0px;
-              padding-top: 0px;
-              position: relative;
-            }
+            ms-TextField-wrapper
+
       >
         <div
           className=
-              ms-TextField-wrapper
-
+              ms-TextField-fieldGroup
+              {
+                align-items: stretch;
+                background: #ffffff;
+                border: 1px solid #a6a6a6;
+                box-shadow: none;
+                box-sizing: border-box;
+                cursor: text;
+                display: flex;
+                flex-direction: row;
+                height: 32px;
+                margin-bottom: 0px;
+                margin-left: 0px;
+                margin-right: 0px;
+                margin-top: 0px;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
+                position: relative;
+              }
+              &:hover {
+                border-color: #333333;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover {
+                border-color: Highlight;
+              }
         >
-          <div
+          <input
+            aria-invalid={false}
             className=
-                ms-TextField-fieldGroup
+                ms-TextField-field
                 {
-                  align-items: stretch;
-                  background: #ffffff;
-                  border: 1px solid #a6a6a6;
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  background-color: transparent;
+                  background: none;
+                  border-radius: 0px;
+                  border: none;
                   box-shadow: none;
                   box-sizing: border-box;
-                  cursor: text;
-                  display: flex;
-                  flex-direction: row;
-                  height: 32px;
+                  color: #333333;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
                   margin-bottom: 0px;
                   margin-left: 0px;
                   margin-right: 0px;
                   margin-top: 0px;
-                  padding-bottom: 0px;
-                  padding-left: 0px;
-                  padding-right: 0px;
-                  padding-top: 0px;
-                  position: relative;
+                  min-width: 0px;
+                  outline: 0px;
+                  padding-bottom: 0;
+                  padding-left: 12px;
+                  padding-right: 12px;
+                  padding-top: 0;
+                  text-overflow: ellipsis;
+                  width: 100%;
                 }
-                &:hover {
-                  border-color: #333333;
+                &:active, &:focus, &:hover {
+                  outline: 0px;
                 }
-                @media screen and (-ms-high-contrast: active){&:hover {
-                  border-color: Highlight;
+                &::-ms-clear {
+                  display: none;
                 }
-          >
-            <input
-              aria-invalid={false}
-              className=
-                  ms-TextField-field
-                  {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    background-color: transparent;
-                    background: none;
-                    border-radius: 0px;
-                    border: none;
-                    box-shadow: none;
-                    box-sizing: border-box;
-                    color: #333333;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    margin-bottom: 0px;
-                    margin-left: 0px;
-                    margin-right: 0px;
-                    margin-top: 0px;
-                    min-width: 0px;
-                    outline: 0px;
-                    padding-bottom: 0;
-                    padding-left: 12px;
-                    padding-right: 12px;
-                    padding-top: 0;
-                    text-overflow: ellipsis;
-                    width: 100%;
-                  }
-                  &:active, &:focus, &:hover {
-                    outline: 0px;
-                  }
-                  &::-ms-clear {
-                    display: none;
-                  }
-                  &::placeholder {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #666666;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    opacity: 1;
-                  }
-                  &:-ms-input-placeholder {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #666666;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 14px;
-                    font-weight: 400;
-                    opacity: 1;
-                  }
-              id="TextField7"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              onInput={[Function]}
-              placeholder="Not tabbable"
-              tabIndex={-1}
-              type="text"
-              value=""
-            />
-          </div>
+                &::placeholder {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  color: #666666;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  opacity: 1;
+                }
+                &:-ms-input-placeholder {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  color: #666666;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  opacity: 1;
+                }
+            id="TextField3"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onInput={[Function]}
+            placeholder="Not tabbable"
+            tabIndex={-1}
+            type="text"
+            value=""
+          />
         </div>
       </div>
+    </div>
+    <div
+      className=
+          ms-TextField
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            box-shadow: none;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            margin-bottom: 0px;
+            margin-left: 0px;
+            margin-right: 0px;
+            margin-top: 0px;
+            padding-bottom: 0px;
+            padding-left: 0px;
+            padding-right: 0px;
+            padding-top: 0px;
+            position: relative;
+          }
+    >
       <div
         className=
-            ms-Toggle
-            is-enabled
-            {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              margin-bottom: 8px;
-            }
+            ms-TextField-wrapper
+
       >
-        <label
+        <div
           className=
-              ms-Label
-              ms-Toggle-label
+              ms-TextField-fieldGroup
               {
-                -moz-osx-font-smoothing: grayscale;
-                -webkit-font-smoothing: antialiased;
+                align-items: stretch;
+                background: #ffffff;
+                border: 1px solid #a6a6a6;
                 box-shadow: none;
                 box-sizing: border-box;
-                color: #333333;
-                display: block;
-                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                font-size: 14px;
-                font-weight: 400;
+                cursor: text;
+                display: flex;
+                flex-direction: row;
+                height: 32px;
                 margin-bottom: 0px;
                 margin-left: 0px;
                 margin-right: 0px;
                 margin-top: 0px;
-                overflow-wrap: break-word;
-                padding-bottom: 5px;
-                padding-left: 0;
-                padding-right: 0;
-                padding-top: 5px;
-                word-wrap: break-word;
-              }
-          htmlFor="Toggle9"
-        >
-          Focus Trap Zone
-        </label>
-        <div
-          className=
-              ms-Toggle-innerContainer
-              {
-                display: inline-flex;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
                 position: relative;
               }
+              &:hover {
+                border-color: #333333;
+              }
+              @media screen and (-ms-high-contrast: active){&:hover {
+                border-color: Highlight;
+              }
         >
-          <button
-            aria-checked={false}
-            checked={false}
+          <input
+            aria-invalid={false}
             className=
-                ms-Toggle-background
-                {
-                  align-items: center;
-                  background: #ffffff;
-                  border-color: #666666;
-                  border-radius: 1em;
-                  border-style: solid;
-                  border-width: 1px;
-                  box-sizing: border-box;
-                  cursor: pointer;
-                  display: flex;
-                  font-size: 20px;
-                  height: 1em;
-                  outline: transparent;
-                  padding-bottom: 0;
-                  padding-left: .2em;
-                  padding-right: .2em;
-                  padding-top: 0;
-                  position: relative;
-                  transition: all 0.1s ease;
-                  width: 2.2em;
-                }
-                &::-moz-focus-inner {
-                  border: 0;
-                }
-                .ms-Fabric--isFocusVisible &:focus:after {
-                  border: 1px solid #ffffff;
-                  bottom: -2px;
-                  content: "";
-                  left: -2px;
-                  outline: 1px solid #666666;
-                  position: absolute;
-                  right: -2px;
-                  top: -2px;
-                  z-index: 1;
-                }
-                &:hover {
-                  border-color: #333333;
-                }
-                @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb {
-                  border-color: Highlight;
-                }
-                @media screen and (-ms-high-contrast: active){&:hover {
-                  border-color: Highlight;
-                }
-            data-is-focusable={true}
-            id="Toggle9"
-            onChange={[Function]}
-            onClick={[Function]}
-            role="switch"
-            tabIndex={-1}
-            type="button"
-          >
-            <div
-              className=
-                  ms-Toggle-thumb
-                  {
-                    background-color: #333333;
-                    border-color: transparent;
-                    border-radius: .5em;
-                    border-style: solid;
-                    border-width: .28em;
-                    box-sizing: border-box;
-                    height: .5em;
-                    transition: all 0.1s ease;
-                    width: .5em;
-                  }
-            />
-          </button>
-          <label
-            className=
-                ms-Label
-                ms-Toggle-stateText
+                ms-TextField-field
                 {
                   -moz-osx-font-smoothing: grayscale;
                   -webkit-font-smoothing: antialiased;
+                  background-color: transparent;
+                  background: none;
+                  border-radius: 0px;
+                  border: none;
                   box-shadow: none;
                   box-sizing: border-box;
                   color: #333333;
-                  display: block;
                   font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
@@ -639,27 +518,49 @@ exports[`Component Examples renders FocusTrapZone.NoTabbable.Example.tsx correct
                   margin-left: 0px;
                   margin-right: 0px;
                   margin-top: 0px;
-                  overflow-wrap: break-word;
-                  padding-bottom: 5px;
-                  padding-left: 0;
-                  padding-right: 0;
-                  padding-top: 5px;
-                  word-wrap: break-word;
-                }
-                && {
-                  margin-bottom: 0;
-                  margin-left: 8px;
-                  margin-right: 8px;
-                  margin-top: 0;
+                  min-width: 0px;
+                  outline: 0px;
                   padding-bottom: 0;
-                  padding-left: 0;
-                  padding-right: 0;
+                  padding-left: 12px;
+                  padding-right: 12px;
                   padding-top: 0;
-                  user-select: none;
+                  text-overflow: ellipsis;
+                  width: 100%;
                 }
-          >
-            Off
-          </label>
+                &:active, &:focus, &:hover {
+                  outline: 0px;
+                }
+                &::-ms-clear {
+                  display: none;
+                }
+                &::placeholder {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  color: #666666;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  opacity: 1;
+                }
+                &:-ms-input-placeholder {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  color: #666666;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 400;
+                  opacity: 1;
+                }
+            id="TextField5"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onInput={[Function]}
+            placeholder="Not tabbable"
+            tabIndex={-1}
+            type="text"
+            value=""
+          />
         </div>
       </div>
     </div>