diff --git a/docs/components/select-rich/use-cases.md b/docs/components/select-rich/use-cases.md
index 6118a2578..7f64fc5fa 100644
--- a/docs/components/select-rich/use-cases.md
+++ b/docs/components/select-rich/use-cases.md
@@ -188,7 +188,7 @@ export const checkedIndexAndValue = ({ shadowRoot }) => html`
       aria-labelledby="label-richSelectCheckedInput"
       type="number"
       @change=${e => {
-        const selectEl = shadowRoot.getElementById('checkedRichSelect');
+        const selectEl = shadowRoot.querySelector('#checkedRichSelect');
         selectEl.checkedIndex = e.target.value;
       }}
     />
@@ -196,9 +196,9 @@ export const checkedIndexAndValue = ({ shadowRoot }) => html`
   <button
     class="log-button"
     @click=${() => {
-      const selectEl = shadowRoot.getElementById('checkedRichSelect');
+      const selectEl = shadowRoot.querySelector('#checkedRichSelect');
       console.log(`checkedIndex: ${selectEl.checkedIndex}`);
-      console.log(`checkedValue: ${selectEl.checkedValue}`);
+      console.log(`modelValue: ${selectEl.modelValue}`);
     }}
   >
     Console log checked index and value