diff --git a/plasmicpkgs/react-aria/src/registerInput.tsx b/plasmicpkgs/react-aria/src/registerInput.tsx
index 4dba98ec218..b6599e9ef4c 100644
--- a/plasmicpkgs/react-aria/src/registerInput.tsx
+++ b/plasmicpkgs/react-aria/src/registerInput.tsx
@@ -15,6 +15,7 @@ import { pickAriaComponentVariants, WithVariants } from "./variant-utils";
 
 const INPUT_VARIANTS = [
   "focused" as const,
+  "focusVisible" as const,
   "hovered" as const,
   "disabled" as const,
 ];
@@ -84,14 +85,19 @@ export function BaseInput(props: BaseInputProps) {
           hovered: isHovered,
         });
       }}
-      onFocus={() => {
-        plasmicUpdateVariant?.({
-          focused: true,
+      onFocus={(e) => {
+        setTimeout(() => {
+          // using settimeout to update the variant, as the input only gets the `data-focus-visible` attribute in the next tick
+          plasmicUpdateVariant?.({
+            focused: true,
+            focusVisible: !!e.target.getAttribute("data-focus-visible"),
+          });
         });
       }}
       onBlur={() => {
         plasmicUpdateVariant?.({
           focused: false,
+          focusVisible: false,
         });
       }}
       {...mergedProps}
diff --git a/plasmicpkgs/react-aria/src/registerListBox.tsx b/plasmicpkgs/react-aria/src/registerListBox.tsx
index 9a805b888df..a6904c4ad8c 100644
--- a/plasmicpkgs/react-aria/src/registerListBox.tsx
+++ b/plasmicpkgs/react-aria/src/registerListBox.tsx
@@ -14,18 +14,24 @@ import {
   Registerable,
   registerComponentHelper,
 } from "./utils";
+import { pickAriaComponentVariants, WithVariants } from "./variant-utils";
 
 export interface BaseListBoxControlContextData {
   itemIds: string[];
   isStandalone: boolean;
 }
 
+const LISTBOX_VARIANTS = ["focused" as const, "focusVisible" as const];
+
+const { variants } = pickAriaComponentVariants(LISTBOX_VARIANTS);
+
 export interface BaseListBoxProps
   extends Omit<
       React.ComponentProps<typeof ListBox>,
       "selectedKeys" | "defaultSelectedKeys"
     >,
-    HasControlContextData<BaseListBoxControlContextData> {
+    HasControlContextData<BaseListBoxControlContextData>,
+    WithVariants<typeof LISTBOX_VARIANTS> {
   children?: React.ReactNode;
   selectedKeys?: string | string[] | undefined;
   defaultSelectedKeys?: string | string[] | undefined;
@@ -55,12 +61,12 @@ export function BaseListBox(props: BaseListBoxProps) {
     children,
     selectedKeys,
     defaultSelectedKeys,
+    plasmicUpdateVariant,
     ...rest
   } = props;
   const context = React.useContext(PlasmicListBoxContext);
   const isStandalone = !context;
   const [ids, setIds] = useState<string[]>([]);
-
   const idManager = useMemo(
     () => context?.idManager ?? new ListBoxItemIdManager(),
     []
@@ -83,6 +89,21 @@ export function BaseListBox(props: BaseListBoxProps) {
     <ListBox
       selectedKeys={normalizeSelectedKeys(selectedKeys)}
       defaultSelectedKeys={normalizeSelectedKeys(defaultSelectedKeys)}
+      onFocus={(e) => {
+        setTimeout(() => {
+          // using settimeout to update the variant, as it only gets the `data-focus-visible` attribute in the next tick
+          plasmicUpdateVariant?.({
+            focused: true,
+            focusVisible: !!e.target.getAttribute("data-focus-visible"),
+          });
+        });
+      }}
+      onBlur={() => {
+        plasmicUpdateVariant?.({
+          focused: false,
+          focusVisible: false,
+        });
+      }}
       {...rest}
     >
       {children}
@@ -174,6 +195,7 @@ export function registerListBox(
       displayName: "Aria ListBox",
       importPath: "@plasmicpkgs/react-aria/skinny/registerListBox",
       importName: "BaseListBox",
+      variants,
       defaultStyles: {
         width: "250px",
         borderWidth: "1px",
diff --git a/plasmicpkgs/react-aria/src/registerSelect.tsx b/plasmicpkgs/react-aria/src/registerSelect.tsx
index fa83c4ab367..c5dcfefcfd9 100644
--- a/plasmicpkgs/react-aria/src/registerSelect.tsx
+++ b/plasmicpkgs/react-aria/src/registerSelect.tsx
@@ -81,7 +81,11 @@ export interface BaseSelectControlContextData {
   itemIds: string[];
 }
 
-const SELECT_VARIANTS = ["disabled" as const];
+const SELECT_VARIANTS = [
+  "focused" as const,
+  "focusVisible" as const,
+  "disabled" as const,
+];
 
 const { variants: SELECT_VARIANTS_DATA } =
   pickAriaComponentVariants(SELECT_VARIANTS);
@@ -139,6 +143,21 @@ export function BaseSelect(props: BaseSelectProps) {
       name={name}
       disabledKeys={disabledKeys}
       aria-label={ariaLabel}
+      onFocus={(e) => {
+        setTimeout(() => {
+          // using settimeout to update the variant, as it only gets the `data-focus-visible` attribute in the next tick
+          plasmicUpdateVariant?.({
+            focused: true,
+            focusVisible: !!e.target.getAttribute("data-focus-visible"),
+          });
+        });
+      }}
+      onBlur={() => {
+        plasmicUpdateVariant?.({
+          focused: false,
+          focusVisible: false,
+        });
+      }}
       {...extractPlasmicDataProps(props)}
     >
       <SelectAutoOpen {...props} />
diff --git a/plasmicpkgs/react-aria/src/registerTextArea.tsx b/plasmicpkgs/react-aria/src/registerTextArea.tsx
index dff3e5d809f..25bcd589e02 100644
--- a/plasmicpkgs/react-aria/src/registerTextArea.tsx
+++ b/plasmicpkgs/react-aria/src/registerTextArea.tsx
@@ -15,6 +15,7 @@ import { pickAriaComponentVariants, WithVariants } from "./variant-utils";
 
 const TEXTAREA_VARIANTS = [
   "focused" as const,
+  "focusVisible" as const,
   "hovered" as const,
   "disabled" as const,
 ];
@@ -59,14 +60,19 @@ export function BaseTextArea(props: BaseTextAreaProps) {
 
   return (
     <TextArea
-      onFocus={() => {
-        plasmicUpdateVariant?.({
-          focused: true,
+      onFocus={(e) => {
+        setTimeout(() => {
+          // using settimeout to update the variant, as it only gets the `data-focus-visible` attribute in the next tick
+          plasmicUpdateVariant?.({
+            focused: true,
+            focusVisible: !!e.target.getAttribute("data-focus-visible"),
+          });
         });
       }}
       onBlur={() => {
         plasmicUpdateVariant?.({
           focused: false,
+          focusVisible: false,
         });
       }}
       onHoverChange={(isHovered) => {