elastic · weronikaolejniczak · Mar 18, 2026 · Mar 18, 2026 · Mar 18, 2026 · Mar 18, 2026
@@ -69,7 +69,24 @@ export type Options = {
 const processTsxSource = (source: string) => {
   // jsxImportSource pragma is needed in CodeSandbox as it doesn't seem
   // to support that setting via tsconfig.json
-  return `/** @jsxImportSource @emotion/react */\n${source}`;
+  let processed = `/** @jsxImportSource @emotion/react */\n${source}`;
+
+  // Inject `@elastic/charts` CSS for demos that use the charts library,
+  // since CodeSandbox doesn't load it globally unlike the docs site
+  if (source.includes('@elastic/charts')) {
+    // Match the closing line of the @elastic/charts import (handles both
+    // single-line and multi-line imports, and both quote styles)
+    processed = processed.replace(
+      /^(.*from ['"]@elastic\/charts['"];)$/m,
+      [
+        '$1',
+        "import '@elastic/charts/dist/theme_only_light.css';",
+        "import '@elastic/charts/dist/theme_only_dark.css';",
+      ].join('\n')
+    );
+  }
+
+  return processed;
 };
 
 export const createOpenInCodeSandboxAction =

@@ -120,11 +120,7 @@ export default () => {
 
 The `errors` prop allows you to pass an array of errors if syntax is malformed. The below example starts with an incomplete tooltip tag, showing this error message by default. These errors are meant to be ephemeral and part of the editing experience. They should not be a substitute for [form validation](../../forms/layouts/validation.mdx).
 
-```mdx-code-block
-import Link from '@docusaurus/Link';
-```
-
-<Demo scope={{ Link }}>
+<Demo>
 ```tsx interactive
 import React, { useCallback, useState, useRef } from 'react';
 import {
@@ -133,6 +129,7 @@ import {
   EuiCodeBlock,
   EuiButton,
   EuiFormErrorText,
+  EuiLink,
   htmlIdGenerator,
 } from '@elastic/eui';
 
@@ -175,7 +172,7 @@ export default () => {
       >
         Utilize error text or{' '}
         <strong>
-          <Link to="/docs/forms/validation">EuiFormRow</Link>
+          <EuiLink href="/docs/forms/validation">EuiFormRow</EuiLink>
         </strong>{' '}
         for more permanent error feedback
       </EuiFormErrorText>

@@ -425,7 +425,7 @@ import * as ElasticCharts from '@elastic/charts';
 
 <Demo scope={{ ...ElasticCharts }}>
   ```tsx
-  import React, { useCallback, useState } from 'react';
+  import React, { useCallback, useState } from "react";
   import {
     getDefaultEuiMarkdownParsingPlugins,
     getDefaultEuiMarkdownProcessingPlugins,
@@ -459,7 +459,7 @@ import * as ElasticCharts from '@elastic/charts';
     euiPaletteOrange,
     euiPaletteWarm,
     getDefaultEuiMarkdownUiPlugins,
-  } from '@elastic/eui';
+  } from "@elastic/eui";
   import {
     Chart,
     Settings,
@@ -468,7 +468,7 @@ import * as ElasticCharts from '@elastic/charts';
     DataGenerator,
     LIGHT_THEME,
     DARK_THEME,
-  } from '@elastic/charts';
+  } from "@elastic/charts";
 
   const paletteData = {
     euiPaletteForStatus,
@@ -490,15 +490,15 @@ import * as ElasticCharts from '@elastic/charts';
   const generateData = (categories) => dg.generateGroupedSeries(10, categories);
 
   const chartDemoPlugin = {
-    name: 'chartDemoPlugin',
+    name: "chartDemoPlugin",
     button: {
-      label: 'Chart',
-      iconType: 'visBarVerticalStacked',
+      label: "Chart",
+      iconType: "visBarVerticalStacked",
     },
     helpText: (
       <div>
         <EuiCodeBlock language="md" fontSize="l" paddingSize="s" isCopyable>
-          {'!{chart{options}}'}
+          {"!{chart{options}}"}
         </EuiCodeBlock>
         <EuiSpacer size="s" />
         <EuiText size="xs" style={{ marginLeft: 16 }}>
@@ -516,7 +516,7 @@ import * as ElasticCharts from '@elastic/charts';
       </div>
     ),
     editor: function ChartEditor({ node, onSave, onCancel }) {
-      const [palette, setPalette] = useState((node && node.palette) || '1');
+      const [palette, setPalette] = useState((node && node.palette) || "1");
       const [categories, setCategories] = useState(5);
 
       const onChange = (e) => {
@@ -528,7 +528,7 @@ import * as ElasticCharts from '@elastic/charts';
           value: String(index + 1),
           title: paletteName,
           palette: paletteData[paletteNames[index]](categories),
-          type: 'fixed',
+          type: "fixed",
         };
       });
 
@@ -596,33 +596,33 @@ import * as ElasticCharts from '@elastic/charts';
     const methods = Parser.prototype.blockMethods;
 
     function tokenizeChart(eat, value, silent) {
-      if (value.startsWith('!{chart') === false) return false;
+      if (value.startsWith("!{chart") === false) return false;
 
       const nextChar = value[7];
 
-      if (nextChar !== '{' && nextChar !== '}') return false; // this isn't actually a chart
+      if (nextChar !== "{" && nextChar !== "}") return false; // this isn't actually a chart
 
       if (silent) {
         return true;
       }
 
       // is there a configuration?
-      const hasConfiguration = nextChar === '{';
+      const hasConfiguration = nextChar === "{";
 
-      let match = '!{chart';
+      let match = "!{chart";
       let configuration = {};
 
       if (hasConfiguration) {
-        let configurationString = '';
+        let configurationString = "";
 
         let openObjects = 0;
 
         for (let i = 7; i < value.length; i++) {
           const char = value[i];
-          if (char === '{') {
+          if (char === "{") {
             openObjects++;
             configurationString += char;
-          } else if (char === '}') {
+          } else if (char === "}") {
             openObjects--;
             if (openObjects === -1) {
               break;
@@ -645,22 +645,22 @@ import * as ElasticCharts from '@elastic/charts';
         }
       }
 
-      match += '}';
+      match += "}";
 
       return eat(match)({
-        type: 'chartDemoPlugin',
+        type: "chartDemoPlugin",
         ...configuration,
       });
     }
 
     tokenizers.chart = tokenizeChart;
-    methods.splice(methods.indexOf('text'), 0, 'chart');
+    methods.splice(methods.indexOf("text"), 0, "chart");
   }
 
   // receives the configuration from the parser and renders
   const ChartMarkdownRenderer = ({ palette, categories }) => {
     const { colorMode } = useEuiTheme();
-    const chartBaseTheme = colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME;
+    const chartBaseTheme = colorMode === "DARK" ? DARK_THEME : LIGHT_THEME;
     const customColors = {
       colors: {
         vizColors: paletteData[paletteNames[palette - 1]](categories),
@@ -678,10 +678,10 @@ import * as ElasticCharts from '@elastic/charts';
           id="status"
           name="Status"
           data={generateData(categories)}
-          xAccessor={'x'}
-          yAccessors={['y']}
-          splitSeriesAccessors={['g']}
-          stackAccessors={['g']}
+          xAccessor={"x"}
+          yAccessors={["y"]}
+          splitSeriesAccessors={["g"]}
+          stackAccessors={["g"]}
         />
         <Axis id="bottom-axis" position="bottom" showGridLines />
         <Axis
@@ -739,11 +739,11 @@ import * as ElasticCharts from '@elastic/charts';
         <div className="eui-textRight">
           <EuiButton
             size="s"
-            iconType={isAstShowing ? 'eyeClosed' : 'eye'}
+            iconType={isAstShowing ? "eyeClosed" : "eye"}
             onClick={() => setIsAstShowing(!isAstShowing)}
             fill={isAstShowing}
           >
-            {isAstShowing ? 'Hide editor AST' : 'Show editor AST'}
+            {isAstShowing ? "Hide editor AST" : "Show editor AST"}
           </EuiButton>
         </div>
         {isAstShowing && <EuiCodeBlock language="json">{ast}</EuiCodeBlock>}

@@ -3,14 +3,18 @@ sidebar_position: 2
 keywords: [EuiDatePickerRange]
 ---
 
+import displayTogglesSource from '!raw-loader!../../../../src/components/display_toggles/display_toggles';
+
 # Date picker range
 
 To create a single date range control, use **EuiDatePickerRange** and pass individual [EuiDatePicker](./date-picker.mdx) components into the `startDateControl` and `endDateControl` props. You can control the state of both inputs as direct props on **EuiDatePickerRange** as well as control each individually. Date specific props need to applied to the individual components.
 
+<Demo extraFiles={{ 'display_toggles.tsx': displayTogglesSource }}>
 ```tsx interactive
 import React, { useState } from 'react';
 import { EuiDatePicker, EuiDatePickerRange } from '@elastic/eui';
 import moment from 'moment';
+import { DisplayToggles } from './display_toggles';
 
 export default () => {
   const [startDate, setStartDate] = useState(moment());
@@ -45,6 +49,7 @@ export default () => {
   );
 };
 ```
+</Demo>
 
 :::tip
 If you need even more functionality such as relative time, suggested date ranges, and refresh intervals, consider using [EuiSuperDatePicker](./super-date-picker.mdx).
@@ -54,6 +59,7 @@ If you need even more functionality such as relative time, suggested date ranges
 
 Use the `inline` prop to display the date picker directly in the page instead of inside a popover. If you do not need the default inline shadow effect, apply the `shadow={false}` prop.
 
+<Demo extraFiles={{ 'display_toggles.tsx': displayTogglesSource }}>
 ```tsx interactive
 import React, { useState } from 'react';
 import {
@@ -64,6 +70,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import moment from 'moment';
+import { DisplayToggles } from './display_toggles';
 
 export default () => {
   const [shadow, setShadow] = useState(true);
@@ -117,6 +124,7 @@ export default () => {
   );
 };
 ```
+</Demo>
 
 ### Dynamic `minDate` and `maxDate`
 

@@ -3,6 +3,8 @@ sidebar_position: 1
 keywords: [EuiDatePicker]
 ---
 
+import displayTogglesSource from '!raw-loader!../../../../src/components/display_toggles/display_toggles';
+
 # Date picker
 
 **EuiDatePicker** is the foundational component that all other EUI date and time controls are built upon. It itself depends upon <a href="https://momentjs.com/docs/" target="_blank">moment</a> for all of its formatting, and a forked and modified version of <a href="https://github.com/Hacker0x01/react-datepicker/tree/v2.0.0" target="_blank">react-datepicker</a> for accessibility.
@@ -33,9 +35,11 @@ export default () => {
 
 Examples of how the input can appear within a form. This should match our other form styles.
 
+<Demo extraFiles={{ 'display_toggles.tsx': displayTogglesSource }}>
 ```tsx interactive
 import React, { useState } from 'react';
 import { EuiDatePicker, EuiSpacer, EuiFormRow } from '@elastic/eui';
+import { DisplayToggles } from './display_toggles';
 
 export default () => {
   const [startDate, setStartDate] = useState(null);
@@ -86,6 +90,7 @@ export default () => {
   );
 };
 ```
+</Demo>
 
 ## Time selection
 
@@ -425,6 +430,7 @@ export default () => {
 
 Use the `inline` prop to display the date picker directly in the page instead of inside a popover. If you do not need the default inline shadow effect, apply the `shadow={false}` prop.
 
+<Demo extraFiles={{ 'display_toggles.tsx': displayTogglesSource }}>
 ```tsx interactive
 import React, { useState } from 'react';
 import {
@@ -434,6 +440,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import moment from 'moment';
+import { DisplayToggles } from './display_toggles';
 
 export default () => {
   const [shadow, setShadow] = useState(true);
@@ -470,6 +477,7 @@ export default () => {
   );
 };
 ```
+</Demo>
 
 ## Custom classes
 

@@ -387,7 +387,13 @@ import React, { useState } from 'react';
 import {
   EuiSuperDatePicker,
   EuiSuperDatePickerProps,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSelect,
+  EuiSwitch,
+  EuiSpacer,
   OnTimeChangeProps,
+  useEuiTheme,
 } from '@elastic/eui';
 
 export default () => {
@@ -435,7 +441,7 @@ export default () => {
         width={width}
         compressed={compressed}
       />
-    </EuiSpacer>
+    </>
   );
 };
 ```