diff --git a/packages/select/src/elements/Select.example.md b/packages/select/src/elements/Select.example.md
index 1fbc0b97f92..09c1ffc8744 100644
--- a/packages/select/src/elements/Select.example.md
+++ b/packages/select/src/elements/Select.example.md
@@ -5,6 +5,12 @@ For an accessible experience for all of our users, it is important to use the
 and/or provide a `Label`, `Hint`, and or `Message`.
 
 ```jsx
+const DATA = {
+  'item-1': 'Item 1',
+  'item-2': 'Item 2',
+  'item-3': 'Item 3'
+};
+
 initialState = {
   selectedKey: 'item-1'
 };
@@ -15,13 +21,13 @@ initialState = {
     selectedKey={state.selectedKey}
     onChange={selectedKey => setState({ selectedKey })}
     options={[
-      <Item key="item-1">Item 1</Item>,
-      <Item key="item-2">Item 2</Item>,
+      <Item key="item-1">{DATA['item-1']}</Item>,
+      <Item key="item-2">{DATA['item-2']}</Item>,
       <Item disabled>Disabled Item</Item>,
-      <Item key="item-3">Item 3</Item>
+      <Item key="item-3">{DATA['item-3']}</Item>
     ]}
   >
-    {state.selectedKey}
+    {DATA[state.selectedKey]}
   </Select>
 </SelectField>;
 ```
@@ -29,6 +35,12 @@ initialState = {
 ### Small Select
 
 ```jsx
+const DATA = {
+  'item-1': 'Item 1',
+  'item-2': 'Item 2',
+  'item-3': 'Item 3'
+};
+
 initialState = {
   selectedKey: 'item-1'
 };
@@ -40,13 +52,13 @@ initialState = {
     selectedKey={state.selectedKey}
     onChange={selectedKey => setState({ selectedKey })}
     options={[
-      <Item key="item-1">Item 1</Item>,
-      <Item key="item-2">Item 2</Item>,
+      <Item key="item-1">{DATA['item-1']}</Item>,
+      <Item key="item-2">{DATA['item-2']}</Item>,
       <Item disabled>Disabled Item</Item>,
-      <Item key="item-3">Item 3</Item>
+      <Item key="item-3">{DATA['item-3']}</Item>
     ]}
   >
-    {state.selectedKey}
+    {DATA[state.selectedKey]}
   </Select>
 </SelectField>;
 ```
diff --git a/packages/select/src/elements/SelectField.example.md b/packages/select/src/elements/SelectField.example.md
index 7e90f7baa2e..44a30b43b01 100644
--- a/packages/select/src/elements/SelectField.example.md
+++ b/packages/select/src/elements/SelectField.example.md
@@ -38,6 +38,13 @@ You can handle the validation of a field `validation` prop in
 the `Message` and `Select` components.
 
 ```jsx
+const DATA = {
+  'item-1': 'Item 1',
+  'item-2': 'Item 2',
+  'item-3': 'Item 3',
+  'invalid-item': 'Invalid Item'
+};
+
 initialState = {
   selectedKey: 'item-1'
 };
@@ -65,13 +72,13 @@ getMessage = selectedKey => {
     onChange={selectedKey => setState({ selectedKey })}
     validation={getValidation(state.selectedKey)}
     options={[
-      <Item key="item-1">Item 1</Item>,
-      <Item key="item-2">Item 2</Item>,
-      <Item key="item-3">Item 3</Item>,
-      <Item key="invalid-item">Invalid Item</Item>
+      <Item key="item-1">{DATA['item-1']}</Item>,
+      <Item key="item-2">{DATA['item-2']}</Item>,
+      <Item key="item-3">{DATA['item-3']}</Item>,
+      <Item key="invalid-item">{DATA['invalid-item']}</Item>
     ]}
   >
-    {state.selectedKey}
+    {DATA[state.selectedKey]}
   </Select>
   {getMessage(state.selectedKey)}
 </SelectField>;