diff --git a/.changepacks/changepack_log_select_a11y.json b/.changepacks/changepack_log_select_a11y.json
new file mode 100644
index 000000000..594b6596a
--- /dev/null
+++ b/.changepacks/changepack_log_select_a11y.json
@@ -0,0 +1,7 @@
+{
+  "changes": {
+    "packages/components/package.json": "Patch"
+  },
+  "note": "Select follows the listbox pattern: the trigger has aria-haspopup, aria-controls and opens with ArrowDown/ArrowUp; the popup is a listbox (aria-multiselectable for checkbox selects) whose options carry role=option, aria-selected and aria-disabled; opening focuses the selected or first option, arrows/Home/End move between enabled options, Enter/Space choose one, and Escape or choosing closes the popup and returns focus to the trigger. An outside click on a controlled select now calls onOpenChange(false) instead of changing hidden internal state",
+  "date": "2026-10-01T00:00:00.000Z"
+}
diff --git a/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap
index 4845f4a2d..bb043a68a 100644
--- a/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -3,10 +3,10 @@
 exports[`Checkbox should render basic checkbox 1`] = `
 "<div>
   <div class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255">
-    <label class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255" for="_r_0_">
-      <input id="_r_0_" class="background-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_checked-1 border-0-none-_a__c_checked-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_checked_c_disabled-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_disabled-1 accent-color-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_--1 appearance-0-none--1 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E0E0E0_cm__h_333_rp__rp_--1 border-radius-0-2px--1 display-0-block--1 height-0-100_pc_--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100_pc_--1 z-index-0-0--1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_20_pc__cm__h_FFF_s_80_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_30_pc__cm__h_000_s_70_pc__rp__rp_-_a__c_active-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_100_pc__cm__h_000_s_15_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_100_pc__cm__h_FFF_s_15_pc__rp__rp_-_a__c_checked_c_hover-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_10_pc__cm__h_FFF_s_90_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_20_pc__cm__h_000_s_80_pc__rp__rp_-_a__c_hover-1 border-0-1px_s_solid_s_var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_hover-1 cursor-0-pointer--1 " type="checkbox">
+    <label class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255" for="checkbox">
+      <input id="checkbox" class="background-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_checked-1 border-0-none-_a__c_checked-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_checked_c_disabled-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_disabled-1 accent-color-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_--1 appearance-0-none--1 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E0E0E0_cm__h_333_rp__rp_--1 border-radius-0-2px--1 display-0-block--1 height-0-100_pc_--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100_pc_--1 z-index-0-0--1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_20_pc__cm__h_FFF_s_80_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_30_pc__cm__h_000_s_70_pc__rp__rp_-_a__c_active-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_100_pc__cm__h_000_s_15_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_100_pc__cm__h_FFF_s_15_pc__rp__rp_-_a__c_checked_c_hover-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_10_pc__cm__h_FFF_s_90_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_20_pc__cm__h_000_s_80_pc__rp__rp_-_a__c_hover-1 border-0-1px_s_solid_s_var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_hover-1 cursor-0-pointer--1 " type="checkbox">
     </label>
-    <label class="cursor-0-pointer--255" for="_r_0_">
+    <label class="cursor-0-pointer--255" for="checkbox">
       <span class="font-size-0-14px--255 user-select-0-none--255 color-0-var_lp_--text_cm_light-dark_lp__h_2F2F2F_cm__h_EDEDED_rp__rp_--255">
         Test Checkbox
       </span>
@@ -18,14 +18,14 @@ exports[`Checkbox should render basic checkbox 1`] = `
 exports[`Checkbox should render checked checkbox 1`] = `
 "<div>
   <div class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255">
-    <label class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255" for="_r_1_">
-      <input id="_r_1_" class="background-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_checked-1 border-0-none-_a__c_checked-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_checked_c_disabled-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_disabled-1 accent-color-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_--1 appearance-0-none--1 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E0E0E0_cm__h_333_rp__rp_--1 border-radius-0-2px--1 display-0-block--1 height-0-100_pc_--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100_pc_--1 z-index-0-0--1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_20_pc__cm__h_FFF_s_80_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_30_pc__cm__h_000_s_70_pc__rp__rp_-_a__c_active-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_100_pc__cm__h_000_s_15_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_100_pc__cm__h_FFF_s_15_pc__rp__rp_-_a__c_checked_c_hover-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_10_pc__cm__h_FFF_s_90_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_20_pc__cm__h_000_s_80_pc__rp__rp_-_a__c_hover-1 border-0-1px_s_solid_s_var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_hover-1 cursor-0-pointer--1 " type="checkbox" checked="">
+    <label class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255" for="checkbox">
+      <input id="checkbox" class="background-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_checked-1 border-0-none-_a__c_checked-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_checked_c_disabled-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_disabled-1 accent-color-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_--1 appearance-0-none--1 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E0E0E0_cm__h_333_rp__rp_--1 border-radius-0-2px--1 display-0-block--1 height-0-100_pc_--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100_pc_--1 z-index-0-0--1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_20_pc__cm__h_FFF_s_80_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_30_pc__cm__h_000_s_70_pc__rp__rp_-_a__c_active-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_100_pc__cm__h_000_s_15_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_100_pc__cm__h_FFF_s_15_pc__rp__rp_-_a__c_checked_c_hover-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_10_pc__cm__h_FFF_s_90_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_20_pc__cm__h_000_s_80_pc__rp__rp_-_a__c_hover-1 border-0-1px_s_solid_s_var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_hover-1 cursor-0-pointer--1 " type="checkbox" checked="">
       <svg height="10" viewBox="0 0 12 10" width="12" xmlns="http://www.w3.org/2000/svg" class="opacity-0-1--255 pointer-events-0-none--255 z-index-0-1--255">
         <path clip-rule="evenodd" d="M11.6474 0.807113C12.0992 1.23373 12.1195 1.94575 11.6929 2.39745L5.31789 9.14745C5.10214 9.37589 4.80069 9.50369 4.48649 9.49992C4.1723 9.49615 3.874 9.36114 3.6638 9.12759L0.288803 5.37759C-0.126837 4.91576 -0.0893993 4.20444 0.372424 3.7888C0.834247 3.37315 1.54557 3.41059 1.96121 3.87242L4.51994 6.71544L10.0571 0.852551C10.4837 0.400843 11.1957 0.3805 11.6474 0.807113Z" fill="var(--checkIcon, #FFF)" fill-rule="evenodd">
         </path>
       </svg>
     </label>
-    <label class="cursor-0-pointer--255" for="_r_1_">
+    <label class="cursor-0-pointer--255" for="checkbox">
       <span class="font-size-0-14px--255 user-select-0-none--255 color-0-var_lp_--text_cm_light-dark_lp__h_2F2F2F_cm__h_EDEDED_rp__rp_--255">
         Test Checkbox
       </span>
@@ -37,10 +37,10 @@ exports[`Checkbox should render checked checkbox 1`] = `
 exports[`Checkbox should render disabled checkbox 1`] = `
 "<div>
   <div class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255">
-    <label class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255" for="_r_2_">
-      <input disabled="" id="_r_2_" class="background-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_checked-1 border-0-none-_a__c_checked-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_checked_c_disabled-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_disabled-1 accent-color-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_--1 appearance-0-none--1 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E0E0E0_cm__h_333_rp__rp_--1 border-radius-0-2px--1 display-0-block--1 height-0-100_pc_--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100_pc_--1 z-index-0-0--1    cursor-0-not-allowed--1 " type="checkbox">
+    <label class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255" for="checkbox">
+      <input disabled="" id="checkbox" class="background-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_checked-1 border-0-none-_a__c_checked-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_checked_c_disabled-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_disabled-1 accent-color-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_--1 appearance-0-none--1 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E0E0E0_cm__h_333_rp__rp_--1 border-radius-0-2px--1 display-0-block--1 height-0-100_pc_--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100_pc_--1 z-index-0-0--1    cursor-0-not-allowed--1 " type="checkbox">
     </label>
-    <label class="cursor-0-not-allowed--255" for="_r_2_">
+    <label class="cursor-0-not-allowed--255" for="checkbox">
       <span class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark_lp__h_D6D7DE_cm__h_6F6E6E_rp_--255">
         Test Checkbox
       </span>
@@ -52,14 +52,14 @@ exports[`Checkbox should render disabled checkbox 1`] = `
 exports[`Checkbox should render disabled and checked checkbox 1`] = `
 "<div>
   <div class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255">
-    <label class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255" for="_r_3_">
-      <input disabled="" id="_r_3_" class="background-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_checked-1 border-0-none-_a__c_checked-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_checked_c_disabled-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_disabled-1 accent-color-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_--1 appearance-0-none--1 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E0E0E0_cm__h_333_rp__rp_--1 border-radius-0-2px--1 display-0-block--1 height-0-100_pc_--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100_pc_--1 z-index-0-0--1    cursor-0-not-allowed--1 " type="checkbox" checked="">
+    <label class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255" for="checkbox">
+      <input disabled="" id="checkbox" class="background-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_checked-1 border-0-none-_a__c_checked-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_checked_c_disabled-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_disabled-1 accent-color-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_--1 appearance-0-none--1 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E0E0E0_cm__h_333_rp__rp_--1 border-radius-0-2px--1 display-0-block--1 height-0-100_pc_--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100_pc_--1 z-index-0-0--1    cursor-0-not-allowed--1 " type="checkbox" checked="">
       <svg height="10" viewBox="0 0 12 10" width="12" xmlns="http://www.w3.org/2000/svg" class="opacity-0-1--255 pointer-events-0-none--255 z-index-0-1--255">
         <path clip-rule="evenodd" d="M11.6474 0.807113C12.0992 1.23373 12.1195 1.94575 11.6929 2.39745L5.31789 9.14745C5.10214 9.37589 4.80069 9.50369 4.48649 9.49992C4.1723 9.49615 3.874 9.36114 3.6638 9.12759L0.288803 5.37759C-0.126837 4.91576 -0.0893993 4.20444 0.372424 3.7888C0.834247 3.37315 1.54557 3.41059 1.96121 3.87242L4.51994 6.71544L10.0571 0.852551C10.4837 0.400843 11.1957 0.3805 11.6474 0.807113Z" fill="light-dark(#D6D7DE, #47474A)" fill-rule="evenodd">
         </path>
       </svg>
     </label>
-    <label class="cursor-0-not-allowed--255" for="_r_3_">
+    <label class="cursor-0-not-allowed--255" for="checkbox">
       <span class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark_lp__h_D6D7DE_cm__h_6F6E6E_rp_--255">
         Test Checkbox
       </span>
@@ -71,10 +71,10 @@ exports[`Checkbox should render disabled and checked checkbox 1`] = `
 exports[`Checkbox should render checkbox with custom child 1`] = `
 "<div>
   <div class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255">
-    <label class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255" for="_r_4_">
-      <input id="_r_4_" class="background-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_checked-1 border-0-none-_a__c_checked-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_checked_c_disabled-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_disabled-1 accent-color-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_--1 appearance-0-none--1 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E0E0E0_cm__h_333_rp__rp_--1 border-radius-0-2px--1 display-0-block--1 height-0-100_pc_--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100_pc_--1 z-index-0-0--1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_20_pc__cm__h_FFF_s_80_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_30_pc__cm__h_000_s_70_pc__rp__rp_-_a__c_active-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_100_pc__cm__h_000_s_15_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_100_pc__cm__h_FFF_s_15_pc__rp__rp_-_a__c_checked_c_hover-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_10_pc__cm__h_FFF_s_90_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_20_pc__cm__h_000_s_80_pc__rp__rp_-_a__c_hover-1 border-0-1px_s_solid_s_var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_hover-1 cursor-0-pointer--1 " type="checkbox">
+    <label class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255" for="checkbox">
+      <input id="checkbox" class="background-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_checked-1 border-0-none-_a__c_checked-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_checked_c_disabled-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_disabled-1 accent-color-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_--1 appearance-0-none--1 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E0E0E0_cm__h_333_rp__rp_--1 border-radius-0-2px--1 display-0-block--1 height-0-100_pc_--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100_pc_--1 z-index-0-0--1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_20_pc__cm__h_FFF_s_80_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_30_pc__cm__h_000_s_70_pc__rp__rp_-_a__c_active-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_100_pc__cm__h_000_s_15_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_100_pc__cm__h_FFF_s_15_pc__rp__rp_-_a__c_checked_c_hover-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_10_pc__cm__h_FFF_s_90_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_20_pc__cm__h_000_s_80_pc__rp__rp_-_a__c_hover-1 border-0-1px_s_solid_s_var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_hover-1 cursor-0-pointer--1 " type="checkbox">
     </label>
-    <label class="cursor-0-pointer--255" for="_r_4_">
+    <label class="cursor-0-pointer--255" for="checkbox">
       <div>
         Custom Child
       </div>
@@ -86,10 +86,10 @@ exports[`Checkbox should render checkbox with custom child 1`] = `
 exports[`Checkbox should render with custom colors 1`] = `
 "<div>
   <div class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255">
-    <label class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255" for="_r_h_">
-      <input id="_r_h_" class="background-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_checked-1 border-0-none-_a__c_checked-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_checked_c_disabled-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_disabled-1 accent-color-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_--1 appearance-0-none--1 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E0E0E0_cm__h_333_rp__rp_--1 border-radius-0-2px--1 display-0-block--1 height-0-100_pc_--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100_pc_--1 z-index-0-0--1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_20_pc__cm__h_FFF_s_80_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_30_pc__cm__h_000_s_70_pc__rp__rp_-_a__c_active-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_100_pc__cm__h_000_s_15_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_100_pc__cm__h_FFF_s_15_pc__rp__rp_-_a__c_checked_c_hover-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_10_pc__cm__h_FFF_s_90_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_20_pc__cm__h_000_s_80_pc__rp__rp_-_a__c_hover-1 border-0-1px_s_solid_s_var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_hover-1 cursor-0-pointer--1 " style="--primary: #ff0000; --border: #00ff00; --inputBg: #ffff00;" type="checkbox">
+    <label class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255" for="checkbox">
+      <input id="checkbox" class="background-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_checked-1 border-0-none-_a__c_checked-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_checked_c_disabled-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_disabled-1 accent-color-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_--1 appearance-0-none--1 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E0E0E0_cm__h_333_rp__rp_--1 border-radius-0-2px--1 display-0-block--1 height-0-100_pc_--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100_pc_--1 z-index-0-0--1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_20_pc__cm__h_FFF_s_80_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_30_pc__cm__h_000_s_70_pc__rp__rp_-_a__c_active-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_100_pc__cm__h_000_s_15_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_100_pc__cm__h_FFF_s_15_pc__rp__rp_-_a__c_checked_c_hover-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_10_pc__cm__h_FFF_s_90_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_20_pc__cm__h_000_s_80_pc__rp__rp_-_a__c_hover-1 border-0-1px_s_solid_s_var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_hover-1 cursor-0-pointer--1 " style="--primary: #ff0000; --border: #00ff00; --inputBg: #ffff00;" type="checkbox">
     </label>
-    <label class="cursor-0-pointer--255" for="_r_h_">
+    <label class="cursor-0-pointer--255" for="checkbox">
       <span class="font-size-0-14px--255 user-select-0-none--255 color-0-var_lp_--text_cm_light-dark_lp__h_2F2F2F_cm__h_EDEDED_rp__rp_--255" style="--text: #0000ff;">
         Test Checkbox
       </span>
@@ -101,10 +101,10 @@ exports[`Checkbox should render with custom colors 1`] = `
 exports[`Checkbox should render with partial custom colors 1`] = `
 "<div>
   <div class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255">
-    <label class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255" for="_r_i_">
-      <input id="_r_i_" class="background-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_checked-1 border-0-none-_a__c_checked-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_checked_c_disabled-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_disabled-1 accent-color-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_--1 appearance-0-none--1 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E0E0E0_cm__h_333_rp__rp_--1 border-radius-0-2px--1 display-0-block--1 height-0-100_pc_--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100_pc_--1 z-index-0-0--1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_20_pc__cm__h_FFF_s_80_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_30_pc__cm__h_000_s_70_pc__rp__rp_-_a__c_active-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_100_pc__cm__h_000_s_15_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_100_pc__cm__h_FFF_s_15_pc__rp__rp_-_a__c_checked_c_hover-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_10_pc__cm__h_FFF_s_90_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_20_pc__cm__h_000_s_80_pc__rp__rp_-_a__c_hover-1 border-0-1px_s_solid_s_var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_hover-1 cursor-0-pointer--1 " style="--primary: #ff0000;" type="checkbox">
+    <label class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255" for="checkbox">
+      <input id="checkbox" class="background-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_checked-1 border-0-none-_a__c_checked-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_checked_c_disabled-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_disabled-1 accent-color-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_--1 appearance-0-none--1 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E0E0E0_cm__h_333_rp__rp_--1 border-radius-0-2px--1 display-0-block--1 height-0-100_pc_--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100_pc_--1 z-index-0-0--1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_20_pc__cm__h_FFF_s_80_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_30_pc__cm__h_000_s_70_pc__rp__rp_-_a__c_active-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_100_pc__cm__h_000_s_15_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_100_pc__cm__h_FFF_s_15_pc__rp__rp_-_a__c_checked_c_hover-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_10_pc__cm__h_FFF_s_90_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_20_pc__cm__h_000_s_80_pc__rp__rp_-_a__c_hover-1 border-0-1px_s_solid_s_var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_hover-1 cursor-0-pointer--1 " style="--primary: #ff0000;" type="checkbox">
     </label>
-    <label class="cursor-0-pointer--255" for="_r_i_">
+    <label class="cursor-0-pointer--255" for="checkbox">
       <span class="font-size-0-14px--255 user-select-0-none--255 color-0-var_lp_--text_cm_light-dark_lp__h_2F2F2F_cm__h_EDEDED_rp__rp_--255" style="--text: #0000ff;">
         Test Checkbox
       </span>
@@ -116,14 +116,14 @@ exports[`Checkbox should render with partial custom colors 1`] = `
 exports[`Checkbox should render checked checkbox with custom colors 1`] = `
 "<div>
   <div class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255">
-    <label class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255" for="_r_j_">
-      <input id="_r_j_" class="background-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_checked-1 border-0-none-_a__c_checked-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_checked_c_disabled-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_disabled-1 accent-color-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_--1 appearance-0-none--1 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E0E0E0_cm__h_333_rp__rp_--1 border-radius-0-2px--1 display-0-block--1 height-0-100_pc_--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100_pc_--1 z-index-0-0--1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_20_pc__cm__h_FFF_s_80_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_30_pc__cm__h_000_s_70_pc__rp__rp_-_a__c_active-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_100_pc__cm__h_000_s_15_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_100_pc__cm__h_FFF_s_15_pc__rp__rp_-_a__c_checked_c_hover-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_10_pc__cm__h_FFF_s_90_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_20_pc__cm__h_000_s_80_pc__rp__rp_-_a__c_hover-1 border-0-1px_s_solid_s_var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_hover-1 cursor-0-pointer--1 " style="--primary: #ff0000; --border: #00ff00; --inputBg: #ffff00;" type="checkbox" checked="">
+    <label class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255" for="checkbox">
+      <input id="checkbox" class="background-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_checked-1 border-0-none-_a__c_checked-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_checked_c_disabled-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_disabled-1 accent-color-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_--1 appearance-0-none--1 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E0E0E0_cm__h_333_rp__rp_--1 border-radius-0-2px--1 display-0-block--1 height-0-100_pc_--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100_pc_--1 z-index-0-0--1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_20_pc__cm__h_FFF_s_80_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_30_pc__cm__h_000_s_70_pc__rp__rp_-_a__c_active-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_100_pc__cm__h_000_s_15_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_100_pc__cm__h_FFF_s_15_pc__rp__rp_-_a__c_checked_c_hover-1 background-0-light-dark_lp_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6159D4_rp__s_10_pc__cm__h_FFF_s_90_pc__rp__cm_color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_6670F9_rp__s_20_pc__cm__h_000_s_80_pc__rp__rp_-_a__c_hover-1 border-0-1px_s_solid_s_var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_hover-1 cursor-0-pointer--1 " style="--primary: #ff0000; --border: #00ff00; --inputBg: #ffff00;" type="checkbox" checked="">
       <svg height="10" viewBox="0 0 12 10" width="12" xmlns="http://www.w3.org/2000/svg" class="opacity-0-1--255 pointer-events-0-none--255 z-index-0-1--255" style="--checkIcon: #000000;">
         <path clip-rule="evenodd" d="M11.6474 0.807113C12.0992 1.23373 12.1195 1.94575 11.6929 2.39745L5.31789 9.14745C5.10214 9.37589 4.80069 9.50369 4.48649 9.49992C4.1723 9.49615 3.874 9.36114 3.6638 9.12759L0.288803 5.37759C-0.126837 4.91576 -0.0893993 4.20444 0.372424 3.7888C0.834247 3.37315 1.54557 3.41059 1.96121 3.87242L4.51994 6.71544L10.0571 0.852551C10.4837 0.400843 11.1957 0.3805 11.6474 0.807113Z" fill="var(--checkIcon, #FFF)" fill-rule="evenodd">
         </path>
       </svg>
     </label>
-    <label class="cursor-0-pointer--255" for="_r_j_">
+    <label class="cursor-0-pointer--255" for="checkbox">
       <span class="font-size-0-14px--255 user-select-0-none--255 color-0-var_lp_--text_cm_light-dark_lp__h_2F2F2F_cm__h_EDEDED_rp__rp_--255" style="--text: #0000ff;">
         Test Checkbox
       </span>
@@ -135,10 +135,10 @@ exports[`Checkbox should render checked checkbox with custom colors 1`] = `
 exports[`Checkbox should render disabled checkbox with custom colors 1`] = `
 "<div>
   <div class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255">
-    <label class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255" for="_r_k_">
-      <input disabled="" id="_r_k_" class="background-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_checked-1 border-0-none-_a__c_checked-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_checked_c_disabled-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_disabled-1 accent-color-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_--1 appearance-0-none--1 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E0E0E0_cm__h_333_rp__rp_--1 border-radius-0-2px--1 display-0-block--1 height-0-100_pc_--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100_pc_--1 z-index-0-0--1    cursor-0-not-allowed--1 " style="--primary: #ff0000; --border: #00ff00; --inputBg: #ffff00;" type="checkbox">
+    <label class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255" for="checkbox">
+      <input disabled="" id="checkbox" class="background-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_-_a__c_checked-1 border-0-none-_a__c_checked-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_checked_c_disabled-1 background-0-light-dark_lp__h_F0F0F3_cm__h_47474A_rp_-_a__c_disabled-1 accent-color-0-var_lp_--primary_cm_light-dark_lp__h_6159D4_cm__h_6670F9_rp__rp_--1 appearance-0-none--1 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E0E0E0_cm__h_333_rp__rp_--1 border-radius-0-2px--1 display-0-block--1 height-0-100_pc_--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100_pc_--1 z-index-0-0--1    cursor-0-not-allowed--1 " style="--primary: #ff0000; --border: #00ff00; --inputBg: #ffff00;" type="checkbox">
     </label>
-    <label class="cursor-0-not-allowed--255" for="_r_k_">
+    <label class="cursor-0-not-allowed--255" for="checkbox">
       <span class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark_lp__h_D6D7DE_cm__h_6F6E6E_rp_--255" style="--text: #0000ff;">
         Test Checkbox
       </span>
diff --git a/packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx b/packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx
index e966d3184..0a1b8a080 100644
--- a/packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx
@@ -5,25 +5,35 @@ import { Checkbox } from '../index'
 
 describe('Checkbox', () => {
   it('should render basic checkbox', () => {
-    const { container } = render(<Checkbox>Test Checkbox</Checkbox>)
+    const { container } = render(
+      <Checkbox id="checkbox">Test Checkbox</Checkbox>,
+    )
     expect(container).toMatchSnapshot()
   })
 
   it('should render checked checkbox', () => {
-    const { container } = render(<Checkbox checked>Test Checkbox</Checkbox>)
+    const { container } = render(
+      <Checkbox checked id="checkbox">
+        Test Checkbox
+      </Checkbox>,
+    )
     expect(container).toMatchSnapshot()
     expect(container.querySelector('input')).toBeChecked()
   })
 
   it('should render disabled checkbox', () => {
-    const { container } = render(<Checkbox disabled>Test Checkbox</Checkbox>)
+    const { container } = render(
+      <Checkbox disabled id="checkbox">
+        Test Checkbox
+      </Checkbox>,
+    )
     expect(container).toMatchSnapshot()
     expect(container.querySelector('input')).toBeDisabled()
   })
 
   it('should render disabled and checked checkbox', () => {
     const { container } = render(
-      <Checkbox checked disabled>
+      <Checkbox checked disabled id="checkbox">
         Test Checkbox
       </Checkbox>,
     )
@@ -34,7 +44,7 @@ describe('Checkbox', () => {
 
   it('should render checkbox with custom child', () => {
     const { container } = render(
-      <Checkbox>
+      <Checkbox id="checkbox">
         <div>Custom Child</div>
       </Checkbox>,
     )
@@ -45,7 +55,7 @@ describe('Checkbox', () => {
   it('should call onChange with true when checkbox is clicked and unchecked', async () => {
     const onChange = mock()
     const { container } = render(
-      <Checkbox checked={false} onChange={onChange}>
+      <Checkbox checked={false} id="checkbox" onChange={onChange}>
         Test Checkbox
       </Checkbox>,
     )
@@ -64,7 +74,7 @@ describe('Checkbox', () => {
   it('should call onChange with false when checkbox is clicked and checked', async () => {
     const onChange = mock()
     const { container } = render(
-      <Checkbox checked={true} onChange={onChange}>
+      <Checkbox checked={true} id="checkbox" onChange={onChange}>
         Test Checkbox
       </Checkbox>,
     )
@@ -82,7 +92,7 @@ describe('Checkbox', () => {
   it('should not call onChange when disabled is true', async () => {
     const onChange = mock()
     const { container } = render(
-      <Checkbox disabled onChange={onChange}>
+      <Checkbox disabled id="checkbox" onChange={onChange}>
         Test Checkbox
       </Checkbox>,
     )
@@ -97,7 +107,9 @@ describe('Checkbox', () => {
   })
 
   it('should not call onChange when onChange prop is not provided', async () => {
-    const { container } = render(<Checkbox>Test Checkbox</Checkbox>)
+    const { container } = render(
+      <Checkbox id="checkbox">Test Checkbox</Checkbox>,
+    )
 
     const input = container.querySelector('input')
 
@@ -113,7 +125,7 @@ describe('Checkbox', () => {
   it('should not call onChange when both disabled and onChange are provided', async () => {
     const onChange = mock()
     const { container } = render(
-      <Checkbox checked={false} disabled onChange={onChange}>
+      <Checkbox checked={false} disabled id="checkbox" onChange={onChange}>
         Test Checkbox
       </Checkbox>,
     )
@@ -130,7 +142,7 @@ describe('Checkbox', () => {
   it('should handle label click and trigger onChange', async () => {
     const onChange = mock()
     const { container } = render(
-      <Checkbox checked={false} onChange={onChange}>
+      <Checkbox checked={false} id="checkbox" onChange={onChange}>
         Test Checkbox
       </Checkbox>,
     )
@@ -148,7 +160,7 @@ describe('Checkbox', () => {
   it('should not trigger onChange on label click when disabled', async () => {
     const onChange = mock()
     const { container } = render(
-      <Checkbox disabled onChange={onChange}>
+      <Checkbox disabled id="checkbox" onChange={onChange}>
         Test Checkbox
       </Checkbox>,
     )
@@ -165,7 +177,7 @@ describe('Checkbox', () => {
   it('should pass correct event target checked value to onChange', async () => {
     const onChange = mock()
     const { container } = render(
-      <Checkbox checked={false} onChange={onChange}>
+      <Checkbox checked={false} id="checkbox" onChange={onChange}>
         Test Checkbox
       </Checkbox>,
     )
@@ -181,7 +193,9 @@ describe('Checkbox', () => {
   })
 
   it('should have proper accessibility attributes', () => {
-    const { container } = render(<Checkbox>Test Checkbox</Checkbox>)
+    const { container } = render(
+      <Checkbox id="checkbox">Test Checkbox</Checkbox>,
+    )
 
     const input = container.querySelector('input')
 
@@ -189,7 +203,11 @@ describe('Checkbox', () => {
   })
 
   it('should display CheckIcon when checked', () => {
-    const { container } = render(<Checkbox checked>Test Checkbox</Checkbox>)
+    const { container } = render(
+      <Checkbox checked id="checkbox">
+        Test Checkbox
+      </Checkbox>,
+    )
 
     const checkIcon = container.querySelector('svg')
     expect(checkIcon).toBeInTheDocument()
@@ -197,7 +215,9 @@ describe('Checkbox', () => {
 
   it('should not display CheckIcon when unchecked', () => {
     const { container } = render(
-      <Checkbox checked={false}>Test Checkbox</Checkbox>,
+      <Checkbox checked={false} id="checkbox">
+        Test Checkbox
+      </Checkbox>,
     )
 
     const checkIcon = container.querySelector('svg')
@@ -208,6 +228,7 @@ describe('Checkbox', () => {
     const { container } = render(
       <Checkbox
         data-testid="custom-checkbox"
+        id="checkbox"
         name="test-name"
         value="test-value"
       >
@@ -231,7 +252,9 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox colors={customColors}>Test Checkbox</Checkbox>,
+      <Checkbox colors={customColors} id="checkbox">
+        Test Checkbox
+      </Checkbox>,
     )
 
     expect(container).toMatchSnapshot()
@@ -244,7 +267,9 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox colors={partialColors}>Test Checkbox</Checkbox>,
+      <Checkbox colors={partialColors} id="checkbox">
+        Test Checkbox
+      </Checkbox>,
     )
 
     expect(container).toMatchSnapshot()
@@ -260,7 +285,7 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox checked colors={customColors}>
+      <Checkbox checked colors={customColors} id="checkbox">
         Test Checkbox
       </Checkbox>,
     )
@@ -278,7 +303,7 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox colors={customColors} disabled>
+      <Checkbox colors={customColors} disabled id="checkbox">
         Test Checkbox
       </Checkbox>,
     )
@@ -292,7 +317,9 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox colors={customColors}>Test Checkbox</Checkbox>,
+      <Checkbox colors={customColors} id="checkbox">
+        Test Checkbox
+      </Checkbox>,
     )
 
     const input = container.querySelector('input')
@@ -307,7 +334,9 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox colors={customColors}>Test Checkbox</Checkbox>,
+      <Checkbox colors={customColors} id="checkbox">
+        Test Checkbox
+      </Checkbox>,
     )
 
     const input = container.querySelector('input')
@@ -322,7 +351,9 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox colors={customColors}>Test Checkbox</Checkbox>,
+      <Checkbox colors={customColors} id="checkbox">
+        Test Checkbox
+      </Checkbox>,
     )
 
     const input = container.querySelector('span')
@@ -337,7 +368,9 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox colors={customColors}>Test Checkbox</Checkbox>,
+      <Checkbox colors={customColors} id="checkbox">
+        Test Checkbox
+      </Checkbox>,
     )
 
     const input = container.querySelector('input')
@@ -352,7 +385,7 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox checked colors={customColors}>
+      <Checkbox checked colors={customColors} id="checkbox">
         Test Checkbox
       </Checkbox>,
     )
@@ -373,7 +406,9 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox colors={customColors}>Test Checkbox</Checkbox>,
+      <Checkbox colors={customColors} id="checkbox">
+        Test Checkbox
+      </Checkbox>,
     )
 
     const input = container.querySelector('input')
@@ -385,7 +420,9 @@ describe('Checkbox', () => {
   })
 
   it('should not apply CSS variables when colors prop is not provided', () => {
-    const { container } = render(<Checkbox>Test Checkbox</Checkbox>)
+    const { container } = render(
+      <Checkbox id="checkbox">Test Checkbox</Checkbox>,
+    )
 
     const input = container.querySelector('input')
     // CSS 변수가 undefined로 설정되지 않아야 함
@@ -407,7 +444,12 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox checked={false} colors={customColors} onChange={onChange}>
+      <Checkbox
+        checked={false}
+        colors={customColors}
+        id="checkbox"
+        onChange={onChange}
+      >
         Test Checkbox
       </Checkbox>,
     )
diff --git a/packages/components/src/components/Checkbox/index.tsx b/packages/components/src/components/Checkbox/index.tsx
index 065fdbe4f..8b245f5e0 100644
--- a/packages/components/src/components/Checkbox/index.tsx
+++ b/packages/components/src/components/Checkbox/index.tsx
@@ -29,7 +29,8 @@ export function Checkbox({
   onChange,
   ...props
 }: CheckboxProps) {
-  const generateId = useId()
+  const generatedId = useId()
+  const generateId = props.id ?? generatedId
   const [innerChecked, setInnerChecked] = useState(defaultChecked)
   const finalChecked = checked ?? innerChecked
 
diff --git a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap
index 4e6276f64..7e3ff1ff6 100644
--- a/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -2,8 +2,8 @@
 
 exports[`Select should render 1`] = `
 "<div>
-  <div class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-_a_-1 box-sizing-0-border-box-_a__s__st_-1  ">
-    <button aria-label="Select toggle" type="button" aria-expanded="false" class="border-radius-0-8px--2 outline-0-2px_s_solid-_a__c_focus-visible-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-_d_25s--1 color-0-var_lp_--text_cm__h_272727_rp_-_a__c_active-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_8163E1_rp__s_20_pc__cm__h_FFF_s_80_pc__rp_-_a__c_active-1 border-0-1px_s_solid_s_var_lp_--primary_cm__h_8163E1_rp_-_a__c_active-1 color-0-_h_D6D7DE-_a__c_disabled-1 background-color-0-_h_F0F0F3-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 border-color-0-var_lp_--border_cm__h_E4E4E4_rp_-_a__c_disabled-1 outline-color-0-var_lp_--primaryFocus_cm__h_9385D3_rp_-_a__c_focus-visible-1 border-color-0-var_lp_--primary_cm__h_8163E1_rp_-_a__c_hover-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_8163E1_rp__s_10_pc__cm__h_FFF_s_90_pc__rp_-_a__c_hover-1 color-0-var_lp_--text_cm__h_F6F6F6_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 background-0-var_lp_--primary_cm__h_8163E1_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 color-0-_h_373737-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 background-color-0-_h_47474A-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-transparent-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-var_lp_--primary_cm__h_8163E1_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_674DC7_rp__s_10_pc__cm_var_lp_--inputBackground_cm__h_2E2E2E_rp__s_90_pc__rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 outline-color-0-var_lp_--primaryFocus_cm__h_927CE4_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_focus-visible-1 background-0-var_lp_--inputBackground_cm__h_2E2E2E_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a_-1 background-0-var_lp_--inputBackground_cm__h_FFF_rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm__h_E4E4E4_rp_--1 border-radius-0-10px--1 color-0-var_lp_--text_cm__h_272727_rp_--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--_d_02em--1 letter-spacing-4--_d_03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 ">
+  <div id="select" class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-_a_-1 box-sizing-0-border-box-_a__s__st_-1  ">
+    <button aria-label="Select toggle" type="button" aria-controls="select-listbox" aria-expanded="false" aria-haspopup="listbox" class="border-radius-0-8px--2 outline-0-2px_s_solid-_a__c_focus-visible-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-_d_25s--1 color-0-var_lp_--text_cm__h_272727_rp_-_a__c_active-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_8163E1_rp__s_20_pc__cm__h_FFF_s_80_pc__rp_-_a__c_active-1 border-0-1px_s_solid_s_var_lp_--primary_cm__h_8163E1_rp_-_a__c_active-1 color-0-_h_D6D7DE-_a__c_disabled-1 background-color-0-_h_F0F0F3-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 border-color-0-var_lp_--border_cm__h_E4E4E4_rp_-_a__c_disabled-1 outline-color-0-var_lp_--primaryFocus_cm__h_9385D3_rp_-_a__c_focus-visible-1 border-color-0-var_lp_--primary_cm__h_8163E1_rp_-_a__c_hover-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_8163E1_rp__s_10_pc__cm__h_FFF_s_90_pc__rp_-_a__c_hover-1 color-0-var_lp_--text_cm__h_F6F6F6_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 background-0-var_lp_--primary_cm__h_8163E1_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 color-0-_h_373737-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 background-color-0-_h_47474A-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-transparent-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-var_lp_--primary_cm__h_8163E1_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_674DC7_rp__s_10_pc__cm_var_lp_--inputBackground_cm__h_2E2E2E_rp__s_90_pc__rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 outline-color-0-var_lp_--primaryFocus_cm__h_927CE4_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_focus-visible-1 background-0-var_lp_--inputBackground_cm__h_2E2E2E_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a_-1 background-0-var_lp_--inputBackground_cm__h_FFF_rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm__h_E4E4E4_rp_--1 border-radius-0-10px--1 color-0-var_lp_--text_cm__h_272727_rp_--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--_d_02em--1 letter-spacing-4--_d_03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 ">
       <div class="max-width-0-100_pc_--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255">
         <div class=" line-height-0-1_d_2--255 min-height-0-1_d_2em--255 ">
           Select
@@ -16,8 +16,8 @@ exports[`Select should render 1`] = `
 
 exports[`Select should render with x and y properties 1`] = `
 "<div>
-  <div aria-label="Select" class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-_a_-1 box-sizing-0-border-box-_a__s__st_-1  ">
-    <button aria-label="Select toggle" type="button" aria-expanded="false" class="border-radius-0-8px--2 outline-0-2px_s_solid-_a__c_focus-visible-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-_d_25s--1 color-0-var_lp_--text_cm__h_272727_rp_-_a__c_active-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_8163E1_rp__s_20_pc__cm__h_FFF_s_80_pc__rp_-_a__c_active-1 border-0-1px_s_solid_s_var_lp_--primary_cm__h_8163E1_rp_-_a__c_active-1 color-0-_h_D6D7DE-_a__c_disabled-1 background-color-0-_h_F0F0F3-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 border-color-0-var_lp_--border_cm__h_E4E4E4_rp_-_a__c_disabled-1 outline-color-0-var_lp_--primaryFocus_cm__h_9385D3_rp_-_a__c_focus-visible-1 border-color-0-var_lp_--primary_cm__h_8163E1_rp_-_a__c_hover-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_8163E1_rp__s_10_pc__cm__h_FFF_s_90_pc__rp_-_a__c_hover-1 color-0-var_lp_--text_cm__h_F6F6F6_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 background-0-var_lp_--primary_cm__h_8163E1_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 color-0-_h_373737-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 background-color-0-_h_47474A-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-transparent-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-var_lp_--primary_cm__h_8163E1_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_674DC7_rp__s_10_pc__cm_var_lp_--inputBackground_cm__h_2E2E2E_rp__s_90_pc__rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 outline-color-0-var_lp_--primaryFocus_cm__h_927CE4_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_focus-visible-1 background-0-var_lp_--inputBackground_cm__h_2E2E2E_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a_-1 background-0-var_lp_--inputBackground_cm__h_FFF_rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm__h_E4E4E4_rp_--1 border-radius-0-10px--1 color-0-var_lp_--text_cm__h_272727_rp_--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--_d_02em--1 letter-spacing-4--_d_03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 ">
+  <div aria-label="Select" id="select" class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-_a_-1 box-sizing-0-border-box-_a__s__st_-1  ">
+    <button aria-label="Select toggle" type="button" aria-controls="select-listbox" aria-expanded="false" aria-haspopup="listbox" class="border-radius-0-8px--2 outline-0-2px_s_solid-_a__c_focus-visible-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-_d_25s--1 color-0-var_lp_--text_cm__h_272727_rp_-_a__c_active-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_8163E1_rp__s_20_pc__cm__h_FFF_s_80_pc__rp_-_a__c_active-1 border-0-1px_s_solid_s_var_lp_--primary_cm__h_8163E1_rp_-_a__c_active-1 color-0-_h_D6D7DE-_a__c_disabled-1 background-color-0-_h_F0F0F3-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 border-color-0-var_lp_--border_cm__h_E4E4E4_rp_-_a__c_disabled-1 outline-color-0-var_lp_--primaryFocus_cm__h_9385D3_rp_-_a__c_focus-visible-1 border-color-0-var_lp_--primary_cm__h_8163E1_rp_-_a__c_hover-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_8163E1_rp__s_10_pc__cm__h_FFF_s_90_pc__rp_-_a__c_hover-1 color-0-var_lp_--text_cm__h_F6F6F6_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 background-0-var_lp_--primary_cm__h_8163E1_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 color-0-_h_373737-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 background-color-0-_h_47474A-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-transparent-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-var_lp_--primary_cm__h_8163E1_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_674DC7_rp__s_10_pc__cm_var_lp_--inputBackground_cm__h_2E2E2E_rp__s_90_pc__rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 outline-color-0-var_lp_--primaryFocus_cm__h_927CE4_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_focus-visible-1 background-0-var_lp_--inputBackground_cm__h_2E2E2E_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a_-1 background-0-var_lp_--inputBackground_cm__h_FFF_rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm__h_E4E4E4_rp_--1 border-radius-0-10px--1 color-0-var_lp_--text_cm__h_272727_rp_--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--_d_02em--1 letter-spacing-4--_d_03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 ">
       <div class="max-width-0-100_pc_--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255">
         <div class=" line-height-0-1_d_2--255 min-height-0-1_d_2em--255 ">
           Select
@@ -30,31 +30,31 @@ exports[`Select should render with x and y properties 1`] = `
 
 exports[`Select should render with overflow screen 1`] = `
 "<div>
-  <div class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-_a_-1 box-sizing-0-border-box-_a__s__st_-1  ">
-    <button aria-label="Select toggle" type="button" aria-expanded="true" class="border-radius-0-8px--2 outline-0-2px_s_solid-_a__c_focus-visible-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-_d_25s--1 color-0-var_lp_--text_cm__h_272727_rp_-_a__c_active-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_8163E1_rp__s_20_pc__cm__h_FFF_s_80_pc__rp_-_a__c_active-1 border-0-1px_s_solid_s_var_lp_--primary_cm__h_8163E1_rp_-_a__c_active-1 color-0-_h_D6D7DE-_a__c_disabled-1 background-color-0-_h_F0F0F3-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 border-color-0-var_lp_--border_cm__h_E4E4E4_rp_-_a__c_disabled-1 outline-color-0-var_lp_--primaryFocus_cm__h_9385D3_rp_-_a__c_focus-visible-1 border-color-0-var_lp_--primary_cm__h_8163E1_rp_-_a__c_hover-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_8163E1_rp__s_10_pc__cm__h_FFF_s_90_pc__rp_-_a__c_hover-1 color-0-var_lp_--text_cm__h_F6F6F6_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 background-0-var_lp_--primary_cm__h_8163E1_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 color-0-_h_373737-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 background-color-0-_h_47474A-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-transparent-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-var_lp_--primary_cm__h_8163E1_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_674DC7_rp__s_10_pc__cm_var_lp_--inputBackground_cm__h_2E2E2E_rp__s_90_pc__rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 outline-color-0-var_lp_--primaryFocus_cm__h_927CE4_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_focus-visible-1 background-0-var_lp_--inputBackground_cm__h_2E2E2E_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a_-1 background-0-var_lp_--inputBackground_cm__h_FFF_rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm__h_E4E4E4_rp_--1 border-radius-0-10px--1 color-0-var_lp_--text_cm__h_272727_rp_--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--_d_02em--1 letter-spacing-4--_d_03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 ">
+  <div id="select" class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-_a_-1 box-sizing-0-border-box-_a__s__st_-1  ">
+    <button aria-label="Select toggle" type="button" aria-controls="select-listbox" aria-expanded="true" aria-haspopup="listbox" class="border-radius-0-8px--2 outline-0-2px_s_solid-_a__c_focus-visible-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-_d_25s--1 color-0-var_lp_--text_cm__h_272727_rp_-_a__c_active-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_8163E1_rp__s_20_pc__cm__h_FFF_s_80_pc__rp_-_a__c_active-1 border-0-1px_s_solid_s_var_lp_--primary_cm__h_8163E1_rp_-_a__c_active-1 color-0-_h_D6D7DE-_a__c_disabled-1 background-color-0-_h_F0F0F3-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 border-color-0-var_lp_--border_cm__h_E4E4E4_rp_-_a__c_disabled-1 outline-color-0-var_lp_--primaryFocus_cm__h_9385D3_rp_-_a__c_focus-visible-1 border-color-0-var_lp_--primary_cm__h_8163E1_rp_-_a__c_hover-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_8163E1_rp__s_10_pc__cm__h_FFF_s_90_pc__rp_-_a__c_hover-1 color-0-var_lp_--text_cm__h_F6F6F6_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 background-0-var_lp_--primary_cm__h_8163E1_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 color-0-_h_373737-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 background-color-0-_h_47474A-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-transparent-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-var_lp_--primary_cm__h_8163E1_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_674DC7_rp__s_10_pc__cm_var_lp_--inputBackground_cm__h_2E2E2E_rp__s_90_pc__rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 outline-color-0-var_lp_--primaryFocus_cm__h_927CE4_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_focus-visible-1 background-0-var_lp_--inputBackground_cm__h_2E2E2E_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a_-1 background-0-var_lp_--inputBackground_cm__h_FFF_rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm__h_E4E4E4_rp_--1 border-radius-0-10px--1 color-0-var_lp_--text_cm__h_272727_rp_--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--_d_02em--1 letter-spacing-4--_d_03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 ">
       <div class="max-width-0-100_pc_--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255">
         <div class=" line-height-0-1_d_2--255 min-height-0-1_d_2em--255 ">
           Select
         </div>
       </div>
     </button>
-    <div aria-label="Select container" class="display-0-flex--0 flex-direction-0-column--0 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E4E4E4_cm__h_434343_rp__rp_--1 border-radius-0-8px--1 bottom-0--4px--1 box-shadow-0-0_s_2px_s_2px_s_0_s_var_lp_--base10_cm_light-dark_lp__h_0000001A_cm__h_FFFFFF1A_rp__rp_--1 height-0-fit-content--1 width-0-fit-content--1 gap-0-6px--1 min-width-0-232px--1 padding-0-10px--1 position-0-fixed--1 user-select-0-none--1 z-index-0-1--1 " style="top: 10px; left: 0px; bottom: 778px;">
-      <div aria-label="Select option" data-value="Option 1" class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color_s__d_1s_s_ease-in-out--1  color-0-var_lp_--selectDisabled_cm_light-dark_lp__h_C4C5D1_cm__h_45464D_rp__rp_--1 cursor-0-default--1 font-weight-0-400--1 gap-0-0--1 ">
+    <div aria-label="Select container" id="select-listbox" role="listbox" class="display-0-flex--0 flex-direction-0-column--0 background-0-var_lp_--inputBg_cm_light-dark_lp__h_FFF_cm__h_2E2E2E_rp__rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm_light-dark_lp__h_E4E4E4_cm__h_434343_rp__rp_--1 border-radius-0-8px--1 bottom-0--4px--1 box-shadow-0-0_s_2px_s_2px_s_0_s_var_lp_--base10_cm_light-dark_lp__h_0000001A_cm__h_FFFFFF1A_rp__rp_--1 height-0-fit-content--1 width-0-fit-content--1 gap-0-6px--1 min-width-0-232px--1 padding-0-10px--1 position-0-fixed--1 user-select-0-none--1 z-index-0-1--1 " style="top: 10px; left: 0px; bottom: 778px;">
+      <div aria-disabled="true" aria-label="Select option" aria-selected="false" data-value="Option 1" role="option" class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color_s__d_1s_s_ease-in-out--1  color-0-var_lp_--selectDisabled_cm_light-dark_lp__h_C4C5D1_cm__h_45464D_rp__rp_--1 cursor-0-default--1 font-weight-0-400--1 gap-0-0--1 ">
         Option 1
       </div>
-      <div aria-label="Select option" data-value="Option 2" class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color_s__d_1s_s_ease-in-out--1 background-0-var_lp_--primaryBg_cm_light-dark_lp__h_F4F3FA_cm__h_F4F3FA0D_rp__rp_-_a__c_hover-1 color-0-var_lp_--title_cm_light-dark_lp__h_1A1A1A_cm__h_FAFAFA_rp__rp_--1 cursor-0-pointer--1 font-weight-0-400--1 gap-0-0--1 ">
+      <div aria-label="Select option" aria-selected="false" data-value="Option 2" role="option" tabindex="-1" class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color_s__d_1s_s_ease-in-out--1 background-0-var_lp_--primaryBg_cm_light-dark_lp__h_F4F3FA_cm__h_F4F3FA0D_rp__rp_-_a__c_hover-1 color-0-var_lp_--title_cm_light-dark_lp__h_1A1A1A_cm__h_FAFAFA_rp__rp_--1 cursor-0-pointer--1 font-weight-0-400--1 gap-0-0--1 ">
         Option 2
       </div>
       <div class="background-0-var_lp_--border_cm_light-dark_lp__h_E4E4E4_cm__h_434343_rp__rp_--1 height-0-1px--1 width-0-100_pc_--1 ">
       </div>
-      <div aria-label="Select option" data-value="Option 3" class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color_s__d_1s_s_ease-in-out--1 background-0-var_lp_--primaryBg_cm_light-dark_lp__h_F4F3FA_cm__h_F4F3FA0D_rp__rp_-_a__c_hover-1 color-0-var_lp_--title_cm_light-dark_lp__h_1A1A1A_cm__h_FAFAFA_rp__rp_--1 cursor-0-pointer--1 font-weight-0-400--1 gap-0-0--1 ">
+      <div aria-label="Select option" aria-selected="false" data-value="Option 3" role="option" tabindex="-1" class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color_s__d_1s_s_ease-in-out--1 background-0-var_lp_--primaryBg_cm_light-dark_lp__h_F4F3FA_cm__h_F4F3FA0D_rp__rp_-_a__c_hover-1 color-0-var_lp_--title_cm_light-dark_lp__h_1A1A1A_cm__h_FAFAFA_rp__rp_--1 cursor-0-pointer--1 font-weight-0-400--1 gap-0-0--1 ">
         Option 3
       </div>
-      <div aria-label="Select option" data-value="Option 4" class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color_s__d_1s_s_ease-in-out--1  color-0-var_lp_--selectDisabled_cm_light-dark_lp__h_C4C5D1_cm__h_45464D_rp__rp_--1 cursor-0-default--1 font-weight-0-400--1 gap-0-0--1 ">
+      <div aria-disabled="true" aria-label="Select option" aria-selected="false" data-value="Option 4" role="option" class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color_s__d_1s_s_ease-in-out--1  color-0-var_lp_--selectDisabled_cm_light-dark_lp__h_C4C5D1_cm__h_45464D_rp__rp_--1 cursor-0-default--1 font-weight-0-400--1 gap-0-0--1 ">
         Option 4
       </div>
-      <div class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-_a_-1 box-sizing-0-border-box-_a__s__st_-1  ">
-        <div aria-label="Select toggle" aria-expanded="false" class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color_s__d_1s_s_ease-in-out--1 background-0-var_lp_--primaryBg_cm_light-dark_lp__h_F4F3FA_cm__h_F4F3FA0D_rp__rp_-_a__c_hover-1 color-0-var_lp_--title_cm_light-dark_lp__h_1A1A1A_cm__h_FAFAFA_rp__rp_--1 cursor-0-pointer--1 font-weight-0-400--1 gap-0-6px--1 ">
+      <div id="nested" class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-_a_-1 box-sizing-0-border-box-_a__s__st_-1  ">
+        <div aria-label="Select toggle" aria-selected="false" role="option" tabindex="-1" aria-controls="nested-listbox" aria-expanded="false" aria-haspopup="listbox" class="display-0-flex--0 align-items-0-center--1 border-radius-0-6px--1 height-0-40px--1 padding-right-0-10px--1 padding-left-0-10px--1 transition-0-background-color_s__d_1s_s_ease-in-out--1 background-0-var_lp_--primaryBg_cm_light-dark_lp__h_F4F3FA_cm__h_F4F3FA0D_rp__rp_-_a__c_hover-1 color-0-var_lp_--title_cm_light-dark_lp__h_1A1A1A_cm__h_FAFAFA_rp__rp_--1 cursor-0-pointer--1 font-weight-0-400--1 gap-0-6px--1 ">
           <div class="display-0-flex--0 align-items-0-center--255 justify-content-0-space-between--255 width-0-100_pc_--255">
             Option 5
             <svg class="color-0-_h_8B8E9C--1" fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
@@ -71,8 +71,8 @@ exports[`Select should render with overflow screen 1`] = `
 
 exports[`Select should render with typography prop 1`] = `
 "<div>
-  <div class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-_a_-1 box-sizing-0-border-box-_a__s__st_-1 typo-body1 ">
-    <button aria-label="Select toggle" type="button" aria-expanded="false" class="border-radius-0-8px--2 outline-0-2px_s_solid-_a__c_focus-visible-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-_d_25s--1 color-0-var_lp_--text_cm__h_272727_rp_-_a__c_active-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_8163E1_rp__s_20_pc__cm__h_FFF_s_80_pc__rp_-_a__c_active-1 border-0-1px_s_solid_s_var_lp_--primary_cm__h_8163E1_rp_-_a__c_active-1 color-0-_h_D6D7DE-_a__c_disabled-1 background-color-0-_h_F0F0F3-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 border-color-0-var_lp_--border_cm__h_E4E4E4_rp_-_a__c_disabled-1 outline-color-0-var_lp_--primaryFocus_cm__h_9385D3_rp_-_a__c_focus-visible-1 border-color-0-var_lp_--primary_cm__h_8163E1_rp_-_a__c_hover-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_8163E1_rp__s_10_pc__cm__h_FFF_s_90_pc__rp_-_a__c_hover-1 color-0-var_lp_--text_cm__h_F6F6F6_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 background-0-var_lp_--primary_cm__h_8163E1_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 color-0-_h_373737-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 background-color-0-_h_47474A-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-transparent-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-var_lp_--primary_cm__h_8163E1_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_674DC7_rp__s_10_pc__cm_var_lp_--inputBackground_cm__h_2E2E2E_rp__s_90_pc__rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 outline-color-0-var_lp_--primaryFocus_cm__h_927CE4_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_focus-visible-1 background-0-var_lp_--inputBackground_cm__h_2E2E2E_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a_-1 background-0-var_lp_--inputBackground_cm__h_FFF_rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm__h_E4E4E4_rp_--1 border-radius-0-10px--1 color-0-var_lp_--text_cm__h_272727_rp_--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--_d_02em--1 letter-spacing-4--_d_03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 ">
+  <div id="select" class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-_a_-1 box-sizing-0-border-box-_a__s__st_-1 typo-body1 ">
+    <button aria-label="Select toggle" type="button" aria-controls="select-listbox" aria-expanded="false" aria-haspopup="listbox" class="border-radius-0-8px--2 outline-0-2px_s_solid-_a__c_focus-visible-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-_d_25s--1 color-0-var_lp_--text_cm__h_272727_rp_-_a__c_active-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_8163E1_rp__s_20_pc__cm__h_FFF_s_80_pc__rp_-_a__c_active-1 border-0-1px_s_solid_s_var_lp_--primary_cm__h_8163E1_rp_-_a__c_active-1 color-0-_h_D6D7DE-_a__c_disabled-1 background-color-0-_h_F0F0F3-_a__c_disabled-1 cursor-0-not-allowed-_a__c_disabled-1 border-color-0-var_lp_--border_cm__h_E4E4E4_rp_-_a__c_disabled-1 outline-color-0-var_lp_--primaryFocus_cm__h_9385D3_rp_-_a__c_focus-visible-1 border-color-0-var_lp_--primary_cm__h_8163E1_rp_-_a__c_hover-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_8163E1_rp__s_10_pc__cm__h_FFF_s_90_pc__rp_-_a__c_hover-1 color-0-var_lp_--text_cm__h_F6F6F6_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 background-0-var_lp_--primary_cm__h_8163E1_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_active-1 color-0-_h_373737-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 background-color-0-_h_47474A-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-transparent-_c_root_lb_data-theme_eq_dark_rb__s__a__c_disabled-1 border-color-0-var_lp_--primary_cm__h_8163E1_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 background-0-color-mix_lp_in_s_srgb_cm_var_lp_--primary_cm__h_674DC7_rp__s_10_pc__cm_var_lp_--inputBackground_cm__h_2E2E2E_rp__s_90_pc__rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_hover-1 outline-color-0-var_lp_--primaryFocus_cm__h_927CE4_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a__c_focus-visible-1 background-0-var_lp_--inputBackground_cm__h_2E2E2E_rp_-_c_root_lb_data-theme_eq_dark_rb__s__a_-1 background-0-var_lp_--inputBackground_cm__h_FFF_rp_--1 border-0-1px_s_solid_s_var_lp_--border_cm__h_E4E4E4_rp_--1 border-radius-0-10px--1 color-0-var_lp_--text_cm__h_272727_rp_--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--_d_02em--1 letter-spacing-4--_d_03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 ">
       <div class="max-width-0-100_pc_--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255">
         <div class=" line-height-0-1_d_2--255 min-height-0-1_d_2em--255 ">
           Select
diff --git a/packages/components/src/components/Select/__tests__/index.browser.test.tsx b/packages/components/src/components/Select/__tests__/index.browser.test.tsx
index 116572383..26c4a8135 100644
--- a/packages/components/src/components/Select/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Select/__tests__/index.browser.test.tsx
@@ -24,7 +24,7 @@ const children = (
       <SelectOption disabled value="Option 4">
         Option 4
       </SelectOption>
-      <Select type="radio">
+      <Select id="nested" type="radio">
         <SelectTrigger asChild>
           <SelectOption>
             <Flex alignItems="center" justifyContent="space-between" w="100%">
@@ -49,7 +49,7 @@ const children = (
 
 describe('Select', () => {
   it('should render', () => {
-    const { container } = render(<Select>{children}</Select>)
+    const { container } = render(<Select id="select">{children}</Select>)
     expect(container).toMatchSnapshot()
   })
 
@@ -62,7 +62,7 @@ describe('Select', () => {
   it('should require one element when SelectTrigger uses asChild', () => {
     expect(() => {
       render(
-        <Select>
+        <Select id="select">
           <SelectTrigger asChild>Text</SelectTrigger>
         </Select>,
       )
@@ -72,7 +72,7 @@ describe('Select', () => {
   it('should close select when clicking outside', () => {
     const { container } = render(
       <div data-testid="container">
-        <Select>{children}</Select>
+        <Select id="select">{children}</Select>
       </div>,
     )
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
@@ -88,7 +88,7 @@ describe('Select', () => {
   it('should call onOpenChange function when it is provided', () => {
     const onOpenChange = mock()
     const { container } = render(
-      <Select onOpenChange={onOpenChange} type="radio">
+      <Select id="select" onOpenChange={onOpenChange} type="radio">
         {children}
       </Select>,
     )
@@ -100,7 +100,7 @@ describe('Select', () => {
   it('should call onValueChange function when it is provided', () => {
     const onValueChange = mock()
     const { container } = render(
-      <Select onChange={onValueChange} type="radio">
+      <Select id="select" onChange={onValueChange} type="radio">
         {children}
       </Select>,
     )
@@ -113,7 +113,11 @@ describe('Select', () => {
   })
 
   it('should do nothing when onValueChange is not provided and type is default', () => {
-    const { container } = render(<Select type="default">{children}</Select>)
+    const { container } = render(
+      <Select id="select" type="default">
+        {children}
+      </Select>,
+    )
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
     const option2 = container.querySelector('[data-value="Option 2"]')
@@ -125,7 +129,11 @@ describe('Select', () => {
   })
 
   it('should select option when type is radio and the option should have a check', () => {
-    const { container } = render(<Select type="radio">{children}</Select>)
+    const { container } = render(
+      <Select id="select" type="radio">
+        {children}
+      </Select>,
+    )
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
     const option2 = container.querySelector('[data-value="Option 2"]')
@@ -137,7 +145,11 @@ describe('Select', () => {
   })
 
   it('should have multiple check marks when type is checkbox and multiple options are selected', () => {
-    const { container } = render(<Select type="checkbox">{children}</Select>)
+    const { container } = render(
+      <Select id="select" type="checkbox">
+        {children}
+      </Select>,
+    )
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
     const option2 = container.querySelector('[data-value="Option 2"]')
@@ -151,7 +163,11 @@ describe('Select', () => {
   })
 
   it('should not have a check mark when type is checkbox and the option is not selected', () => {
-    const { container } = render(<Select type="checkbox">{children}</Select>)
+    const { container } = render(
+      <Select id="select" type="checkbox">
+        {children}
+      </Select>,
+    )
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
     const option2 = container.querySelector('[data-value="Option 2"]')
@@ -164,7 +180,7 @@ describe('Select', () => {
   it('should call onClick function when it is provided to SelectOption', () => {
     const onClick = mock()
     const { container } = render(
-      <Select>
+      <Select id="select">
         <SelectTrigger>Select</SelectTrigger>
         <SelectContainer>
           <SelectOption onClick={onClick} value="Option 1">
@@ -186,7 +202,7 @@ describe('Select', () => {
 
   it('should have a check mark when type is radio and defaultValue is provided', () => {
     const { container } = render(
-      <Select defaultValue="Option 2" type="radio">
+      <Select defaultValue="Option 2" id="select" type="radio">
         {children}
       </Select>,
     )
@@ -198,7 +214,11 @@ describe('Select', () => {
   })
 
   it('should not have a check mark when type is radio and defaultValue is not provided', () => {
-    const { container } = render(<Select type="radio">{children}</Select>)
+    const { container } = render(
+      <Select id="select" type="radio">
+        {children}
+      </Select>,
+    )
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
     const selectContainer = container.querySelector(
@@ -209,7 +229,11 @@ describe('Select', () => {
   })
 
   it('should have 10px gap in an option when type is checkbox', () => {
-    const { container } = render(<Select type="checkbox">{children}</Select>)
+    const { container } = render(
+      <Select id="select" type="checkbox">
+        {children}
+      </Select>,
+    )
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
     const option2 = container.querySelector('[data-value="Option 2"]')
@@ -217,7 +241,11 @@ describe('Select', () => {
   })
 
   it('should have 6px gap in an option when type is radio', () => {
-    const { container } = render(<Select type="radio">{children}</Select>)
+    const { container } = render(
+      <Select id="select" type="radio">
+        {children}
+      </Select>,
+    )
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
     const option2 = container.querySelector('[data-value="Option 2"]')
@@ -225,7 +253,11 @@ describe('Select', () => {
   })
 
   it('should have 0 gap in an option when type is default', () => {
-    const { container } = render(<Select type="default">{children}</Select>)
+    const { container } = render(
+      <Select id="select" type="default">
+        {children}
+      </Select>,
+    )
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
     const option2 = container.querySelector('[data-value="Option 2"]')
@@ -237,7 +269,7 @@ describe('Select', () => {
       type: 'no-type',
       children,
     } as unknown as React.ComponentProps<typeof Select>
-    const { container } = render(<Select {...invalidTypeProps} />)
+    const { container } = render(<Select id="select" {...invalidTypeProps} />)
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
     fireEvent.click(selectToggle!)
     const option2 = container.querySelector('[data-value="Option 2"]')
@@ -255,6 +287,7 @@ describe('Select', () => {
           title: 'purple',
         }}
         data-testid="select"
+        id="select"
       >
         {children}
       </Select>,
@@ -271,7 +304,7 @@ describe('Select', () => {
 
   it('should have disabled check color when type is checkbox and the option is disabled', () => {
     const { container } = render(
-      <Select defaultValue={['Option 1']} type="checkbox">
+      <Select defaultValue={['Option 1']} id="select" type="checkbox">
         <SelectTrigger>Select</SelectTrigger>
         <SelectContainer>
           <SelectOption disabled value="Option 1">
@@ -290,7 +323,7 @@ describe('Select', () => {
 
   it('should show confirm button when type is checkbox and showConfirmButton is true', () => {
     const { container } = render(
-      <Select type="checkbox">
+      <Select id="select" type="checkbox">
         <SelectTrigger>Select</SelectTrigger>
         <SelectContainer showConfirmButton>
           <SelectOption disabled value="Option 1">
@@ -312,7 +345,7 @@ describe('Select', () => {
 
   it('should close select when clicking confirm button', () => {
     const { container } = render(
-      <Select type="checkbox">
+      <Select id="select" type="checkbox">
         <SelectTrigger>Select</SelectTrigger>
         <SelectContainer showConfirmButton>
           <SelectOption value="Option 1">Option 1</SelectOption>
@@ -331,7 +364,7 @@ describe('Select', () => {
 
   it('should not show confirm button when type is checkbox and showConfirmButton is false', () => {
     const { container } = render(
-      <Select type="checkbox">
+      <Select id="select" type="checkbox">
         <SelectTrigger>Select</SelectTrigger>
         <SelectContainer showConfirmButton={false}>
           <SelectOption disabled value="Option 1">
@@ -353,7 +386,7 @@ describe('Select', () => {
 
   it('should render IconCheck when type is checkbox and the option is selected', () => {
     const { container } = render(
-      <Select defaultValue={['Option 2']} type="checkbox">
+      <Select defaultValue={['Option 2']} id="select" type="checkbox">
         {children}
       </Select>,
     )
@@ -365,7 +398,7 @@ describe('Select', () => {
 
   it('should not check the option when type is checkbox and the option is not selected', () => {
     const { container } = render(
-      <Select defaultOpen type="checkbox">
+      <Select defaultOpen id="select" type="checkbox">
         <SelectTrigger>Select</SelectTrigger>
         <SelectContainer showConfirmButton={false}>
           <SelectOption disabled value="Option 1">
@@ -384,6 +417,7 @@ describe('Select', () => {
   it('should render with options properties', () => {
     const { container } = render(
       <Select
+        id="select"
         options={[
           { label: 'Option 1', value: 'Option 1' },
           { value: 'Option 2' },
@@ -402,6 +436,7 @@ describe('Select', () => {
     const onValueChange = mock()
     const { container } = render(
       <Select
+        id="select"
         onChange={onValueChange}
         options={[
           { label: 'Option 1', value: 'Option 1' },
@@ -421,7 +456,7 @@ describe('Select', () => {
 
   it('should render with x and y properties', () => {
     const { container } = render(
-      <Select aria-label="Select">
+      <Select aria-label="Select" id="select">
         <SelectTrigger>Select</SelectTrigger>
         <SelectContainer x={10} y={10}>
           <SelectOption value="Option 1">Option 1</SelectOption>
@@ -433,7 +468,9 @@ describe('Select', () => {
   })
 
   it('should render with overflow screen', () => {
-    const { container, rerender } = render(<Select>{children}</Select>)
+    const { container, rerender } = render(
+      <Select id="select">{children}</Select>,
+    )
 
     // open selectContainer
     const selectToggle = container.querySelector('[aria-label="Select toggle"]')
@@ -450,7 +487,7 @@ describe('Select', () => {
     Object.defineProperty(selectContainer, 'offsetWidth', { value: 1100 })
 
     // rerender
-    rerender(<Select>{children}</Select>)
+    rerender(<Select id="select">{children}</Select>)
 
     expect(container).toMatchSnapshot()
   })
@@ -458,7 +495,7 @@ describe('Select', () => {
   it('should change value when clicking on SelectOption without value prop', () => {
     const onChange = mock()
     const { container } = render(
-      <Select className="test" onChange={onChange}>
+      <Select className="test" id="select" onChange={onChange}>
         <SelectTrigger>Select</SelectTrigger>
         <SelectContainer>
           <SelectOption>Option 1</SelectOption>
@@ -476,7 +513,7 @@ describe('Select', () => {
   it('should render with typography prop', () => {
     const onChange = mock()
     const { container } = render(
-      <Select onChange={onChange} typography="body1">
+      <Select id="select" onChange={onChange} typography="body1">
         <SelectTrigger>Select</SelectTrigger>
         <SelectContainer>
           <SelectOption>Option 1</SelectOption>
@@ -485,4 +522,103 @@ describe('Select', () => {
     )
     expect(container).toMatchSnapshot()
   })
+  it('is a listbox operated by keyboard', () => {
+    const onChange = mock()
+    const { container, getByRole, getAllByRole } = render(
+      <Select id="kbd" onChange={onChange} type="radio">
+        <SelectTrigger>Select</SelectTrigger>
+        <SelectContainer>
+          <SelectOption value="a">a</SelectOption>
+          <SelectOption disabled value="b">
+            b
+          </SelectOption>
+          <SelectOption value="c">c</SelectOption>
+        </SelectContainer>
+      </Select>,
+    )
+    const trigger = container.querySelector<HTMLElement>(
+      '[aria-haspopup=listbox]',
+    )!
+    expect(trigger).toHaveAttribute('aria-controls', 'kbd-listbox')
+    fireEvent.keyDown(trigger, { key: 'Tab' })
+    expect(trigger).toHaveAttribute('aria-expanded', 'false')
+    fireEvent.keyDown(trigger, { key: 'ArrowDown' })
+    expect(getByRole('listbox')).toHaveAttribute('id', 'kbd-listbox')
+    fireEvent.keyDown(trigger, { key: 'ArrowDown' })
+    const [a, b, c] = getAllByRole('option')
+    expect(document.activeElement).toBe(a)
+    expect(b).toHaveAttribute('aria-disabled', 'true')
+    const listbox = getByRole('listbox')
+    fireEvent.keyDown(listbox, { key: 'ArrowDown' })
+    expect(document.activeElement).toBe(c)
+    fireEvent.keyDown(listbox, { key: 'ArrowDown' })
+    expect(document.activeElement).toBe(a)
+    fireEvent.keyDown(listbox, { key: 'ArrowUp' })
+    expect(document.activeElement).toBe(c)
+    fireEvent.keyDown(listbox, { key: 'Home' })
+    expect(document.activeElement).toBe(a)
+    fireEvent.keyDown(listbox, { key: 'End' })
+    expect(document.activeElement).toBe(c)
+    fireEvent.keyDown(listbox, { key: 'x' })
+    fireEvent.keyDown(c, { key: 'x' })
+    fireEvent.keyDown(b, { key: 'Enter' })
+    expect(onChange).not.toHaveBeenCalled()
+    fireEvent.keyDown(c, { key: 'Enter' })
+    expect(onChange).toHaveBeenCalledWith('c')
+    expect(document.activeElement).toBe(trigger)
+    expect(container.querySelector('[role=listbox]')).toBeNull()
+    fireEvent.keyDown(trigger, { key: 'ArrowUp' })
+    expect(document.activeElement).toBe(getAllByRole('option')[2])
+    expect(getAllByRole('option')[2]).toHaveAttribute('aria-selected', 'true')
+    fireEvent.keyDown(getByRole('listbox'), { key: 'Escape' })
+    expect(container.querySelector('[role=listbox]')).toBeNull()
+    expect(document.activeElement).toBe(trigger)
+  })
+
+  it('opens with ArrowDown on an asChild trigger and marks checkbox lists', () => {
+    const { container, getByRole } = render(
+      <Select type="checkbox">
+        <SelectTrigger asChild>
+          <button type="button">t</button>
+        </SelectTrigger>
+        <SelectContainer>
+          <SelectOption value="a">a</SelectOption>
+        </SelectContainer>
+      </Select>,
+    )
+    fireEvent.keyDown(container.querySelector('button')!, { key: 'ArrowDown' })
+    expect(getByRole('listbox')).toHaveAttribute('aria-multiselectable', 'true')
+    fireEvent.keyDown(getByRole('option'), { key: ' ' })
+    expect(getByRole('option')).toHaveAttribute('aria-selected', 'true')
+  })
+
+  it('asks a controlled owner to close on an outside click', () => {
+    const onOpenChange = mock()
+    const { container } = render(
+      <Select onOpenChange={onOpenChange} open>
+        <SelectTrigger>t</SelectTrigger>
+        <SelectContainer>
+          <SelectOption value="a">a</SelectOption>
+        </SelectContainer>
+      </Select>,
+    )
+    fireEvent.click(document.body)
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+    expect(container.querySelector('[role=listbox]')).not.toBeNull()
+  })
+
+  it('closes an uncontrolled select on an outside click', () => {
+    const { container } = render(
+      <Select defaultOpen>
+        <SelectTrigger>t</SelectTrigger>
+        <SelectContainer>
+          <SelectOption value="a">a</SelectOption>
+        </SelectContainer>
+      </Select>,
+    )
+    fireEvent.click(container.querySelector('[role=option]')!.parentElement!)
+    expect(container.querySelector('[role=listbox]')).not.toBeNull()
+    fireEvent.click(document.body)
+    expect(container.querySelector('[role=listbox]')).toBeNull()
+  })
 })
diff --git a/packages/components/src/components/Select/index.tsx b/packages/components/src/components/Select/index.tsx
index 4ce1b0220..3fa08b052 100644
--- a/packages/components/src/components/Select/index.tsx
+++ b/packages/components/src/components/Select/index.tsx
@@ -12,6 +12,7 @@ import {
   ComponentProps,
   isValidElement,
   useEffect,
+  useId,
   useRef,
   useState,
 } from 'react'
@@ -75,23 +76,29 @@ export function Select({
   ...props
 }: SelectProps) {
   const ref = useRef<HTMLDivElement>(null)
+  const generatedId = useId()
+  const listboxId = `${props.id ?? generatedId}-listbox`
   const [open, setOpen] = useState(defaultOpen ?? false)
+  const isOpen = openProp ?? open
   const [value, setValue] = useState<SelectValue<typeof type>>(
     defaultValue ?? (type === 'checkbox' ? [] : ''),
   )
 
+  // A controlled select only tells its owner, which decides whether it closes
   useEffect(() => {
+    if (!isOpen) return
     const handleOutsideClick = (e: MouseEvent) => {
       if (ref.current && ref.current.contains(e.target as Node)) return
-      setOpen(false)
+      onOpenChange?.(false)
+      if (openProp === undefined) setOpen(false)
     }
     document.addEventListener('click', handleOutsideClick)
     return () => document.removeEventListener('click', handleOutsideClick)
-  }, [open, setOpen])
+  }, [isOpen, openProp, onOpenChange])
 
-  const handleOpenChange = (open: boolean) => {
-    onOpenChange?.(open)
-    setOpen(open)
+  const handleOpenChange = (next: boolean) => {
+    onOpenChange?.(next)
+    if (openProp === undefined) setOpen(next)
   }
 
   const handleValueChange = (nextValue: string) => {
@@ -112,8 +119,9 @@ export function Select({
   return (
     <SelectContext
       value={{
-        open: openProp ?? open,
+        open: isOpen,
         setOpen: handleOpenChange,
+        listboxId,
         value: valueProp ?? value,
         setValue: handleValueChange,
         type,
@@ -176,10 +184,15 @@ export function SelectTrigger({
   asChild,
   ...props
 }: SelectTriggerProps) {
-  const { open, setOpen } = useSelect()
+  const { open, setOpen, listboxId } = useSelect()
   const handleClick = () => {
     setOpen(!open)
   }
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
+    if (open || (e.key !== 'ArrowDown' && e.key !== 'ArrowUp')) return
+    e.preventDefault()
+    setOpen(true)
+  }
 
   if (asChild) {
     if (!isValidElement<Record<string, unknown>>(children)) {
@@ -188,8 +201,11 @@ export function SelectTrigger({
 
     const Comp = children.type
     const childProps = {
+      'aria-controls': listboxId,
       'aria-expanded': open,
+      'aria-haspopup': 'listbox',
       'aria-label': 'Select toggle',
+      onKeyDown: handleKeyDown,
       onClick: children.props.onClick ?? handleClick,
       ...children.props,
     }
@@ -198,7 +214,9 @@ export function SelectTrigger({
 
   return (
     <Button
+      aria-controls={listboxId}
       aria-expanded={open}
+      aria-haspopup="listbox"
       aria-label="Select toggle"
       className={clsx(
         css({
@@ -208,6 +226,7 @@ export function SelectTrigger({
         className,
       )}
       onClick={handleClick}
+      onKeyDown={handleKeyDown}
       {...props}
     >
       {children}
@@ -229,7 +248,51 @@ export function SelectContainer({
   y = 0,
   ...props
 }: SelectContainerProps) {
-  const { open, setOpen, type, ref } = useSelect()
+  const { open, setOpen, type, ref, listboxId } = useSelect()
+
+  // Opening moves focus to the selected option, or the first one
+  useEffect(() => {
+    if (!open) return
+    const listbox = document.getElementById(listboxId)
+    const option =
+      listbox?.querySelector<HTMLElement>(
+        '[role=option][aria-selected=true]:not([aria-disabled=true])',
+      ) ??
+      listbox?.querySelector<HTMLElement>(
+        '[role=option]:not([aria-disabled=true])',
+      )
+    option?.focus()
+  }, [open, listboxId])
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    const options = Array.from(
+      e.currentTarget.querySelectorAll<HTMLElement>(
+        '[role=option]:not([aria-disabled=true])',
+      ),
+    )
+    const index = options.findIndex(
+      (option) => option === document.activeElement,
+    )
+    const moves: Partial<Record<string, number>> = {
+      ArrowDown: index + 1,
+      ArrowUp: index - 1,
+      Home: 0,
+      End: options.length - 1,
+    }
+    const next = moves[e.key]
+    if (next !== undefined) {
+      e.preventDefault()
+      options[(next + options.length) % options.length]?.focus()
+      return
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      setOpen(false)
+      ref.current
+        ?.querySelector<HTMLElement>('[aria-haspopup=listbox]')
+        ?.focus()
+    }
+  }
 
   if (!open) return null
   return (
@@ -279,6 +342,7 @@ export function SelectContainer({
         }
       }}
       aria-label="Select container"
+      aria-multiselectable={type === 'checkbox' || undefined}
       bg="var(--inputBg, light-dark(#FFF,#2E2E2E))"
       border="1px solid var(--border, light-dark(#E4E4E4,#434343))"
       borderRadius="8px"
@@ -286,9 +350,12 @@ export function SelectContainer({
       boxShadow="0 2px 2px 0 var(--base10, light-dark(#0000001A,#FFFFFF1A))"
       boxSize="fit-content"
       gap="6px"
+      id={listboxId}
       minW="232px"
+      onKeyDown={handleKeyDown}
       p="10px"
       pos="fixed"
+      role="listbox"
       styleOrder={1}
       userSelect="none"
       zIndex={1}
@@ -338,17 +405,15 @@ export function SelectOption({
   showCheck = true,
   ...props
 }: SelectOptionProps) {
-  const { setOpen, setValue, value: selectedValue, type } = useSelect()
+  const { setOpen, setValue, value: selectedValue, type, ref } = useSelect()
 
   const handleClose = () => {
     if (type === 'checkbox') return
     setOpen(false)
+    ref.current?.querySelector<HTMLElement>('[aria-haspopup=listbox]')?.focus()
   }
 
-  const handleClick = (
-    value: string | undefined,
-    e: React.MouseEvent<HTMLDivElement>,
-  ) => {
+  const handleClick = (e?: React.MouseEvent<HTMLDivElement>) => {
     if (onClick) {
       onClick(value, e)
       return
@@ -374,7 +439,9 @@ export function SelectOption({
         }
       }
       alignItems="center"
+      aria-disabled={disabled}
       aria-label="Select option"
+      aria-selected={!!isSelected}
       borderRadius="6px"
       color={
         disabled
@@ -394,9 +461,16 @@ export function SelectOption({
         }[type]
       }
       h="40px"
-      onClick={disabled ? undefined : (e) => handleClick(value, e)}
+      onClick={disabled ? undefined : (e) => handleClick(e)}
+      onKeyDown={(e) => {
+        if (disabled || (e.key !== 'Enter' && e.key !== ' ')) return
+        e.preventDefault()
+        handleClick()
+      }}
       px="10px"
+      role="option"
       styleOrder={1}
+      tabIndex={disabled ? undefined : -1}
       transition="background-color 0.1s ease-in-out"
       {...props}
     >
diff --git a/packages/components/src/contexts/useSelect.ts b/packages/components/src/contexts/useSelect.ts
index cb716bae2..775683bc6 100644
--- a/packages/components/src/contexts/useSelect.ts
+++ b/packages/components/src/contexts/useSelect.ts
@@ -10,6 +10,7 @@ export const SelectContext = createContext<{
   value: SelectValue<SelectType>
   setValue: (value: string) => void
   type: SelectType
+  listboxId: string
   ref: React.RefObject<HTMLDivElement | null>
 } | null>(null)