diff --git a/examples/web/react/components/keyboard-gb/keyboard-gb.tsx b/examples/web/react/components/keyboard-gb/keyboard-gb.tsx
index c9778c26ac3c01842fc16bdb7067df01109b2662..0291cf8a808eae6a1014bb79a55c4de3efcf2cab 100644
--- a/examples/web/react/components/keyboard-gb/keyboard-gb.tsx
+++ b/examples/web/react/components/keyboard-gb/keyboard-gb.tsx
@@ -7,6 +7,7 @@ declare const require: any;
 type KeyboardGBProps = {
     focusable?: boolean;
     fullscreen?: boolean;
+    selectedKeys?: string[];
     style?: string[];
     onKeyDown?: (key: string) => void;
     onKeyUp?: (key: string) => void;
@@ -15,6 +16,7 @@ type KeyboardGBProps = {
 export const KeyboardGB: FC<KeyboardGBProps> = ({
     focusable = true,
     fullscreen = false,
+    selectedKeys = [],
     style = [],
     onKeyDown,
     onKeyUp
@@ -31,9 +33,10 @@ export const KeyboardGB: FC<KeyboardGBProps> = ({
     const renderKey = (
         key: string,
         keyName?: string,
+        selected = false,
         styles: string[] = []
     ) => {
-        const [pressed, setPressed] = useState(false);
+        const [pressed, setPressed] = useState(selected);
         const classes = ["key", pressed ? "pressed" : "", ...styles].join(" ");
         return (
             <span
@@ -103,24 +106,54 @@ export const KeyboardGB: FC<KeyboardGBProps> = ({
             >
                 <div className="dpad">
                     <div className="dpad-top">
-                        {renderKey("â–²", "ArrowUp", ["up"])}
+                        {renderKey(
+                            "â–²",
+                            "ArrowUp",
+                            selectedKeys.includes("ArrowUp"),
+                            ["up"]
+                        )}
                     </div>
                     <div>
-                        {renderKey("â—„", "ArrowLeft", ["left"])}
-                        {renderKey("â–º", "ArrowRight", ["right"])}
+                        {renderKey(
+                            "â—„",
+                            "ArrowLeft",
+                            selectedKeys.includes("ArrowLeft"),
+                            ["left"]
+                        )}
+                        {renderKey(
+                            "â–º",
+                            "ArrowRight",
+                            selectedKeys.includes("ArrowRight"),
+                            ["right"]
+                        )}
                     </div>
                     <div className="dpad-bottom">
-                        {renderKey("â–¼", "ArrowDown", ["down"])}
+                        {renderKey(
+                            "â–¼",
+                            "ArrowDown",
+                            selectedKeys.includes("ArrowDown"),
+                            ["down"]
+                        )}
                     </div>
                 </div>
                 <div className="action">
-                    {renderKey("B", "B", ["b"])}
-                    {renderKey("A", "A", ["a"])}
+                    {renderKey("B", "B", selectedKeys.includes("B"), ["b"])}
+                    {renderKey("A", "A", selectedKeys.includes("A"), ["a"])}
                 </div>
                 <div className="break"></div>
                 <div className="options">
-                    {renderKey("START", "Start", ["start"])}
-                    {renderKey("SELECT", "Select", ["select"])}
+                    {renderKey(
+                        "START",
+                        "Start",
+                        selectedKeys.includes("Start"),
+                        ["start"]
+                    )}
+                    {renderKey(
+                        "SELECT",
+                        "Select",
+                        selectedKeys.includes("Select"),
+                        ["select"]
+                    )}
                 </div>
             </div>
         </div>