diff --git a/examples/case_studies/cascader.xml b/examples/case_studies/cascader.xml
index 5141e40d6..64ebd9819 100644
--- a/examples/case_studies/cascader.xml
+++ b/examples/case_studies/cascader.xml
@@ -3,13 +3,8 @@
     <styles>
       <style id="Body" backgroundColor="white" flex="1" paddingTop="24" />
       <style id="Main" flex="1" marginBottom="40" />
-      <style
-        id="FormGroup"
-        flex="1"
-        marginLeft="24"
-        marginRight="24"
-        marginTop="24"
-      />
+      <style id="Content" marginHorizontal="28" marginTop="20" />
+      <style id="Title" fontSize="18" fontWeight="700" color="#283542" />
       <style
         id="Input"
         borderBottomColor="#E1E1E1"
@@ -31,33 +26,28 @@
         </modifier>
       </style>
       <style
-        id="Label"
-        borderColor="#4E4D4D"
-        fontSize="16"
-        fontWeight="bold"
-        lineHeight="24"
-        marginBottom="8"
+        id="Arrow"
+        color="#8F9EB2"
+        position="absolute"
+        right="2"
+        top="10"
       />
       <style
-        id="Help"
-        borderColor="#FF4847"
-        fontSize="16"
-        fontWeight="normal"
-        lineHeight="24"
-        marginTop="16"
+        id="ClickJackingOutter"
+        bottom="0"
+        left="0"
+        position="absolute"
+        right="0"
+        top="0"
       />
-      <style id="Help--Error" color="#FF4847" />
+      <style id="ClickJackingInner" height="100%" />
       <style
-        id="Submit"
-        color="#4778FF"
-        fontSize="16"
-        fontWeight="bold"
-        lineHeight="24"
+        id="FormGroup"
+        flex="1"
         marginLeft="24"
-        marginTop="16"
+        marginRight="24"
+        marginTop="24"
       />
-
-
       <style id="Select" marginTop="24" />
       <style
         id="Select__Separator"
@@ -119,110 +109,118 @@
           <style color="#312f2f" />
         </modifier>
       </style>
-
-
     </styles>
     <body style="Body" safe-area="true">
-
       <view scroll="true" style="Main" trigger="refresh" action="reload" href="#">
-
-        <select-single name="level1" style="Select">
-
-          <view style="Select__Separator" />
-          <option style="Select__Option" value="1">
-            <behavior trigger="select" action="show" target="section1" />
-            <behavior trigger="deselect" action="hide" target="section1" />
-
-            <text style="Select__Label">Option 1</text>
-            <view style="Select__RadioOuter">
-              <view style="Select__RadioInner" />
-            </view>
-          </option>
-
-          <view style="Select__Separator" />
-
-          <option style="Select__Option" value="2">
-            <behavior trigger="select" action="show" target="section2" />
-            <behavior trigger="deselect" action="hide" target="section2" />
-            <text style="Select__Label">Option 2</text>
-            <view style="Select__RadioOuter">
-              <view style="Select__RadioInner" />
-            </view>
-          </option>
-
-          <view style="Select__Separator" />
-
-          <option style="Select__Option" value="3">
-            <behavior trigger="select" action="show" target="section3" />
-            <behavior trigger="deselect" action="hide" target="section3" />
-            <text style="Select__Label">Option 3</text>
-            <view style="Select__RadioOuter">
-              <view style="Select__RadioInner" />
-            </view>
-          </option>
-          <view style="Select__Separator" />
-
-        </select-single>
-
-
-        <select-single name="level2" style="Select">
-
-          <view id="section1" hide="true">
-            <view style="Select__Separator" />
-            <option style="Select__Option" value="1:1">
-              <text style="Select__Label">1: 1</text>
-              <view style="Select__RadioOuter">
-                <view style="Select__RadioInner" />
-              </view>
-            </option>
-            <view style="Select__Separator" />
-            <option style="Select__Option" value="1:2">
-              <text style="Select__Label">1: 2</text>
-              <view style="Select__RadioOuter">
-                <view style="Select__RadioInner" />
-              </view>
-            </option>
-            <view style="Select__Separator" />
-            <option style="Select__Option" value="1:3">
-              <text style="Select__Label">1: 3</text>
-              <view style="Select__RadioOuter">
-                <view style="Select__RadioInner" />
+        <view style="Content">
+          <text style="Title">Option:</text>
+          <view>
+            <text-field style="Input" name="option" id="Option" value="2:2" placeholderTextColor="#BCC2CC" />
+            <text style="Arrow"> > </text>
+            <view style="ClickJackingOutter">
+              <view style="ClickJackingInner">
+                <behavior action="show" target="Cascader" />
               </view>
-            </option>
-            <view style="Select__Separator" />
+            </view>
           </view>
-
-          <view id="section2" hide="true">
+        </view>
+        <view id="Cascader" hide="true">
+          <select-single name="level1" style="Select" value="2">
             <view style="Select__Separator" />
-            <option style="Select__Option" value="2:1">
-              <text style="Select__Label">2: 1</text>
+            <option style="Select__Option" value="1">
+              <behavior trigger="select" action="show" target="section1" />
+              <behavior trigger="deselect" action="hide" target="section1" />
+              <text style="Select__Label">Option 1</text>
               <view style="Select__RadioOuter">
                 <view style="Select__RadioInner" />
               </view>
             </option>
             <view style="Select__Separator" />
-            <option style="Select__Option" value="2:2">
-              <text style="Select__Label">2: 2</text>
+            <option style="Select__Option" value="2">
+              <behavior trigger="select" action="show" target="section2" />
+              <behavior trigger="deselect" action="hide" target="section2" />
+              <text style="Select__Label">Option 2</text>
               <view style="Select__RadioOuter">
                 <view style="Select__RadioInner" />
               </view>
             </option>
             <view style="Select__Separator" />
-          </view>
-
-          <view id="section3" hide="true">
-            <view style="Select__Separator" />
-            <option style="Select__Option" value="3:3">
-              <text style="Select__Label">3: 1</text>
+            <option style="Select__Option" value="3">
+              <behavior trigger="select" action="show" target="section3" />
+              <behavior trigger="deselect" action="hide" target="section3" />
+              <text style="Select__Label">Option 3</text>
               <view style="Select__RadioOuter">
                 <view style="Select__RadioInner" />
               </view>
             </option>
             <view style="Select__Separator" />
-          </view>
-
-        </select-single>
-
+          </select-single>
+          <select-single name="level2" style="Select">
+            <view id="section1" hide="true">
+              <view style="Select__Separator" />
+              <option style="Select__Option" value="1:1">
+                <text style="Select__Label">1: 1</text>
+                <view style="Select__RadioOuter">
+                  <view style="Select__RadioInner" />
+                </view>
+                <behavior trigger="select" action="set-value" new-value="1:1" target="Option" />
+                <!-- <behavior trigger="select" action="hide" target="Cascader" /> -->
+              </option>
+              <view style="Select__Separator" />
+              <option style="Select__Option" value="1:2">
+                <text style="Select__Label">1: 2</text>
+                <view style="Select__RadioOuter">
+                  <view style="Select__RadioInner" />
+                </view>
+                <behavior trigger="select" action="set-value" new-value="1:2" target="Option" />
+                <!-- <behavior trigger="select" action="hide" target="Cascader" /> -->
+              </option>
+              <view style="Select__Separator" />
+              <option style="Select__Option" value="1:3">
+                <text style="Select__Label">1: 3</text>
+                <view style="Select__RadioOuter">
+                  <view style="Select__RadioInner" />
+                </view>
+                <behavior trigger="select" action="set-value" new-value="1:3" target="Option" />
+                <!-- <behavior trigger="select" action="hide" target="Cascader" /> -->
+              </option>
+              <view style="Select__Separator" />
+            </view>
+            <view id="section2" hide="true">
+              <view style="Select__Separator" />
+              <option style="Select__Option" value="2:1">
+                <text style="Select__Label">2: 1</text>
+                <view style="Select__RadioOuter">
+                  <view style="Select__RadioInner" />
+                </view>
+                <behavior trigger="select" action="set-value" new-value="2:1" target="Option" />
+                <!-- <behavior trigger="select" action="hide" target="Cascader" /> -->
+              </option>
+              <view style="Select__Separator" />
+              <option style="Select__Option" value="2:2" selected="true">
+                <text style="Select__Label">2: 2</text>
+                <view style="Select__RadioOuter">
+                  <view style="Select__RadioInner" />
+                </view>
+                <behavior trigger="select" action="set-value" new-value="2:2" target="Option" />
+                <!-- <behavior trigger="select" action="hide" target="Cascader" /> -->
+              </option>
+              <view style="Select__Separator" />
+            </view>
+            <view id="section3" hide="true">
+              <view style="Select__Separator" />
+              <option style="Select__Option" value="3:1">
+                <text style="Select__Label">3: 1</text>
+                <view style="Select__RadioOuter">
+                  <view style="Select__RadioInner" />
+                </view>
+                <behavior trigger="select" action="set-value" new-value="3:1" target="Option" />
+                <!-- <behavior trigger="select" action="hide" target="Cascader" /> -->
+              </option>
+              <view style="Select__Separator" />
+            </view>
+          </select-single>
+        </view>
       </view>
     </body>
   </screen>
