diff --git a/packages/core/src/components/editable-text/editable-text.md b/packages/core/src/components/editable-text/editable-text.md
index 1f593bd14f..3cadb0ab39 100644
--- a/packages/core/src/components/editable-text/editable-text.md
+++ b/packages/core/src/components/editable-text/editable-text.md
@@ -1,18 +1,35 @@
 @# Editable text
 
-__EditableText__ is an interactive component which appears as normal UI text. It transforms into an interactive
-text input field when a user hovers and/or focuses on it.
+**EditableText** is an interactive component that displays as static text but
+visually resembles an input field on hover. When clicked or focused,
+it transforms into a text input, allowing for inline text editing.
 
-The text input inherits all font styling from its ancestors, making for a seamless transition between reading and
-editing text.
+The text input inherits font styling from its parent elements, making for a
+seamless transition between reading and editing text. **EditableText** is ideal
+for inline renaming, editable descriptions, or simple text updates. You should
+not use **EditableText** when a more static, always-editable [**InputGroup**](#core/components/input-group)
+or [**TextArea**](#core/components/text-area) component would suffice.
 
-You might use this component for inline renaming, or for an
-[editable multiline description](#core/components/editable-text.multiline-mode).
-You should not use __EditableText__ when a more static, always-editable
-[__InputGroup__](#core/components/input-group) or [__TextArea__](#core/components/text-area)
-component would suffice.
+@## Import
 
-@reactExample EditableTextExample
+```tsx
+import { EditableText } from "@blueprintjs/core";
+```
+
+@## Usage
+
+**EditableText** can be used in both controlled and uncontrolled modes, similar
+to a standard React [`<input>` element](https://react.dev/reference/react-dom/components/input).
+Use the `value` prop for controlled usage, and `defaultValue` for uncontrolled usage. Use `onChange` to listen to
+ongoing updates and use `onConfirm` and `onCancel` to listen only to completed or canceled edits.
+
+The `onConfirm` callback is invoked when a user presses <kbd>Enter</kbd>
+(or <kbd>Mod + Enter</kbd> when multiline) or when the user blurs the input.
+The `onCancel` callback is invoked when user presses <kbd>Escape</kbd>.
+Canceling resets the field to the last confirmed value. Neither callback is
+invoked if the value is unchanged.
+
+@reactCodeExample EditableTextBasicExample
 
 <div class="@ns-callout @ns-intent-danger @ns-icon-error @ns-callout-has-body-content">
     <h5 class="@ns-heading">Centering EditableText</h5>
@@ -23,34 +40,40 @@ you should center the component via flexbox or with `position` and `transform: t
 
 </div>
 
-
 @## Multiline mode
 
-By default, __EditableText__ supports _exactly one line of text_ and will grow or shrink horizontally based on the
-length of text.
-
-You may enable the `multiline` prop to use a `<textarea>` which spans multiple lines instead of a single-line
-`<input type="text">`. Multiline mode always appears at 100% width and adjusts _vertically_ based on length of text.
-Use the `minLines` and `maxLines` props to constrain the height of the component.
-
-```tsx
-<EditableText multiline={true} minLines={3} maxLines={12} {...props} />
-```
+By default, **EditableText** supports a single line of text and resizes horizontally as needed.
+Enabling the `multiline` prop transforms it into a `<textarea>`, which grows and shrinks vertically
+as content changes. Use the `minLines` and `maxLines` props to constrain the height of the component.
 
 Users may confirm text in multiline mode by pressing <kbd>Ctrl + Enter</kbd> or <kbd>Command + Enter</kbd> rather than
-<kbd>Enter</kbd>. (Pressing the <kbd>Enter</kbd> key by itself moves the cursor to the next line.) This behavior
+<kbd>Enter</kbd>. Pressing the <kbd>Enter</kbd> key by itself moves the cursor to the next line. This behavior
 can be inverted with the `confirmOnEnterKey` prop.
 
-@## Usage
+@reactCodeExample EditableTextMultilineExample
 
-__EditableText__ is used like an [`<input>` element](https://facebook.github.io/react/docs/forms.html) and supports
-controlled or uncontrolled usage through the `value` or `defaultValue` props, respectively. Use `onChange` to listen to
-ongoing updates and use `onConfirm` and `onCancel` to listen only to completed or canceled edits.
+@## Intent
+
+The `intent` prop controls the visual appearance of **EditableText**, similar to
+[**InputGroup**](#core/components/input-group) and [**TextArea**](#core/components/text-area).
+This prop is useful for highlighting states like success, warnings, or errors.
+
+-   **Primary** – Indicates primary action or highlight.
+-   **Success** – Represents a positive outcome or confirmation.
+-   **Warning** – Warns about potential issues.
+-   **Danger** – Highlights an error or critical issue.
+
+@reactCodeExample EditableTextIntentExample
+
+@## Select text on focus
+
+Enable `selectAllOnFocus` to automatically select all text when the input is focused.
+
+@reactCodeExample EditableTextSelectExample
+
+@## Interactive Playground
 
-The `onConfirm` and `onCancel` callbacks are invoked based on user interaction. The user presses <kbd>Enter</kbd>
-(or <kbd>Command + Enter</kbd> when multiline) or blurs the input to confirm the current value, or presses
-<kbd>Escape</kbd> to cancel. Canceling resets the field to the last confirmed value. Neither callback is invoked if the
-value is unchanged.
+@reactExample EditableTextPlaygroundExample
 
 @## Props interface
 
diff --git a/packages/docs-app/src/examples/core-examples/editableTextExample.tsx b/packages/docs-app/src/examples/core-examples/editableTextExample.tsx
deleted file mode 100644
index ade67e3272..0000000000
--- a/packages/docs-app/src/examples/core-examples/editableTextExample.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-/*
- * Copyright 2016 Palantir Technologies, Inc. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import * as React from "react";
-
-import { Classes, EditableText, FormGroup, H1, H5, type Intent, NumericInput, Switch } from "@blueprintjs/core";
-import { Example, type ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
-
-import { IntentSelect } from "./common/intentSelect";
-
-const INPUT_ID = "EditableTextExample-max-length";
-
-export interface EditableTextExampleState {
-    alwaysRenderInput?: boolean;
-    confirmOnEnterKey?: boolean;
-    disabled?: boolean;
-    intent?: Intent;
-    maxLength?: number;
-    report?: string;
-    selectAllOnFocus?: boolean;
-}
-
-export class EditableTextExample extends React.PureComponent<ExampleProps, EditableTextExampleState> {
-    public state: EditableTextExampleState = {
-        alwaysRenderInput: false,
-        confirmOnEnterKey: false,
-        disabled: false,
-        report: "",
-        selectAllOnFocus: false,
-    };
-
-    private toggleDisabled = handleBooleanChange((disabled: boolean) => this.setState({ disabled }));
-
-    private handleIntentChange = (intent: Intent) => this.setState({ intent });
-
-    private toggleSelectAll = handleBooleanChange(selectAllOnFocus => this.setState({ selectAllOnFocus }));
-
-    private toggleSwap = handleBooleanChange(confirmOnEnterKey => this.setState({ confirmOnEnterKey }));
-
-    private toggleAlwaysRenderInput = handleBooleanChange(alwaysRenderInput => this.setState({ alwaysRenderInput }));
-
-    public render() {
-        return (
-            <Example options={this.renderOptions()} {...this.props}>
-                <H1>
-                    <EditableText
-                        alwaysRenderInput={this.state.alwaysRenderInput}
-                        disabled={this.state.disabled}
-                        intent={this.state.intent}
-                        maxLength={this.state.maxLength}
-                        placeholder="Edit title..."
-                        selectAllOnFocus={this.state.selectAllOnFocus}
-                    />
-                </H1>
-                <EditableText
-                    alwaysRenderInput={this.state.alwaysRenderInput}
-                    disabled={this.state.disabled}
-                    intent={this.state.intent}
-                    maxLength={this.state.maxLength}
-                    maxLines={12}
-                    minLines={3}
-                    multiline={true}
-                    placeholder="Edit report... (controlled, multiline)"
-                    selectAllOnFocus={this.state.selectAllOnFocus}
-                    confirmOnEnterKey={this.state.confirmOnEnterKey}
-                    value={this.state.report}
-                    onChange={this.handleReportChange}
-                />
-            </Example>
-        );
-    }
-
-    private renderOptions() {
-        return (
-            <>
-                <H5>Props</H5>
-                <IntentSelect intent={this.state.intent} onChange={this.handleIntentChange} />
-                <FormGroup label="Max length" labelFor={INPUT_ID}>
-                    <NumericInput
-                        className={Classes.FORM_CONTENT}
-                        fill={true}
-                        id={INPUT_ID}
-                        max={300}
-                        min={0}
-                        onValueChange={this.handleMaxLengthChange}
-                        placeholder="Unlimited"
-                        value={this.state.maxLength || ""}
-                    />
-                </FormGroup>
-                <Switch checked={this.state.disabled} label="Disabled" onChange={this.toggleDisabled} />
-                <Switch
-                    checked={this.state.selectAllOnFocus}
-                    label="Select all on focus"
-                    onChange={this.toggleSelectAll}
-                />
-                <Switch checked={this.state.confirmOnEnterKey} onChange={this.toggleSwap}>
-                    Swap keypress for confirm and newline (multiline only)
-                </Switch>
-                <Switch
-                    checked={this.state.alwaysRenderInput}
-                    label="Always render input"
-                    onChange={this.toggleAlwaysRenderInput}
-                />
-            </>
-        );
-    }
-
-    private handleReportChange = (report: string) => this.setState({ report });
-
-    private handleMaxLengthChange = (maxLength: number) => {
-        if (maxLength === 0) {
-            this.setState({ maxLength: undefined });
-        } else {
-            const report = this.state.report.slice(0, maxLength);
-            this.setState({ maxLength, report });
-        }
-    };
-}
diff --git a/packages/docs-app/src/examples/core-examples/editableTextExamples.tsx b/packages/docs-app/src/examples/core-examples/editableTextExamples.tsx
new file mode 100644
index 0000000000..fe673dc69e
--- /dev/null
+++ b/packages/docs-app/src/examples/core-examples/editableTextExamples.tsx
@@ -0,0 +1,65 @@
+/* !
+ * (c) Copyright 2024 Palantir Technologies Inc. All rights reserved.
+ */
+
+import dedent from "dedent";
+import * as React from "react";
+
+import { EditableText, Intent, OverlayToaster } from "@blueprintjs/core";
+import { CodeExample, type ExampleProps } from "@blueprintjs/docs-theme";
+
+export const EditableTextBasicExample: React.FC<ExampleProps> = props => {
+    const code = `<EditableText placeholder="Click to edit..." onConfirm={...} onCancel={...} />`;
+    const toaster = React.useRef<OverlayToaster>(null);
+
+    const handleConfirm = React.useCallback(
+        (value: string) => toaster.current.show({ message: `Confirmed: ${value}`, intent: Intent.SUCCESS }),
+        [],
+    );
+
+    const handleCancel = React.useCallback(
+        () => toaster.current.show({ message: "Canceled", intent: Intent.DANGER }),
+        [],
+    );
+
+    return (
+        <CodeExample code={code} {...props}>
+            <EditableText placeholder="Click to edit..." onConfirm={handleConfirm} onCancel={handleCancel} />
+            <OverlayToaster ref={toaster} />
+        </CodeExample>
+    );
+};
+
+export const EditableTextMultilineExample: React.FC<ExampleProps> = props => {
+    const code = `<EditableText multiline={true} minLines={3} maxLines={5} placeholder="Click to edit multiple lines..." />`;
+    return (
+        <CodeExample code={code} {...props}>
+            <EditableText multiline={true} minLines={3} maxLines={5} placeholder="Click to edit multiple lines..." />
+        </CodeExample>
+    );
+};
+
+export const EditableTextIntentExample: React.FC<ExampleProps> = props => {
+    const code = dedent`
+        <EditableText intent="primary" placeholder="Primary editable text..." />
+        <EditableText intent="success" placeholder="Success editable text..." />
+        <EditableText intent="warning" placeholder="Warning editable text..." />
+        <EditableText intent="danger" placeholder="Danger editable text..." />`;
+    return (
+        <CodeExample code={code} {...props}>
+            <EditableText intent="primary" placeholder="Primary editable text..." />
+            <EditableText intent="success" placeholder="Success editable text..." />
+            <EditableText intent="warning" placeholder="Warning editable text..." />
+            <EditableText intent="danger" placeholder="Danger editable text..." />
+        </CodeExample>
+    );
+};
+
+export const EditableTextSelectExample: React.FC<ExampleProps> = props => {
+    const code = `<EditableText selectAllOnFocus={true} value="Click to select this text." />`;
+    return (
+        <CodeExample code={code} {...props}>
+            <EditableText selectAllOnFocus={true} value="Click to select this text." />
+        </CodeExample>
+    );
+};
diff --git a/packages/docs-app/src/examples/core-examples/editableTextPlaygroundExample.tsx b/packages/docs-app/src/examples/core-examples/editableTextPlaygroundExample.tsx
new file mode 100644
index 0000000000..76db8eb8ef
--- /dev/null
+++ b/packages/docs-app/src/examples/core-examples/editableTextPlaygroundExample.tsx
@@ -0,0 +1,110 @@
+/*
+ * Copyright 2024 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+
+import { Classes, EditableText, FormGroup, H1, H5, type Intent, NumericInput, Switch } from "@blueprintjs/core";
+import { Example, type ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
+
+import { IntentSelect } from "./common/intentSelect";
+
+const INPUT_ID = "EditableTextExample-max-length";
+
+export const EditableTextPlaygroundExample: React.FC<ExampleProps> = props => {
+    const [alwaysRenderInput, setAlwaysRenderInput] = React.useState(false);
+    const [confirmOnEnterKey, setConfirmOnEnterKey] = React.useState(false);
+    const [disabled, setDisabled] = React.useState(false);
+    const [intent, setIntent] = React.useState<Intent | undefined>(undefined);
+    const [maxLength, setMaxLength] = React.useState<number | undefined>(undefined);
+    const [report, setReport] = React.useState("");
+    const [selectAllOnFocus, setSelectAllOnFocus] = React.useState(false);
+
+    const handleMaxLengthChange = React.useCallback(
+        (value: number) => {
+            if (maxLength === 0) {
+                setMaxLength(undefined);
+            } else {
+                setMaxLength(value);
+                setReport(report.slice(0, value));
+            }
+        },
+        [maxLength, report],
+    );
+
+    const handleReportChange = React.useCallback((value: string) => setReport(value), []);
+
+    const options = (
+        <>
+            <H5>Props</H5>
+            <IntentSelect intent={intent} onChange={setIntent} />
+            <FormGroup label="Max length" labelFor={INPUT_ID}>
+                <NumericInput
+                    className={Classes.FORM_CONTENT}
+                    fill={true}
+                    id={INPUT_ID}
+                    max={300}
+                    min={0}
+                    onValueChange={handleMaxLengthChange}
+                    placeholder="Unlimited"
+                    value={maxLength || ""}
+                />
+            </FormGroup>
+            <Switch checked={disabled} label="Disabled" onChange={handleBooleanChange(setDisabled)} />
+            <Switch
+                checked={selectAllOnFocus}
+                label="Select all on focus"
+                onChange={handleBooleanChange(setSelectAllOnFocus)}
+            />
+            <Switch checked={confirmOnEnterKey} onChange={handleBooleanChange(setConfirmOnEnterKey)}>
+                Swap keypress for confirm and newline (multiline only)
+            </Switch>
+            <Switch
+                checked={alwaysRenderInput}
+                label="Always render input"
+                onChange={handleBooleanChange(setAlwaysRenderInput)}
+            />
+        </>
+    );
+
+    return (
+        <Example options={options} {...props}>
+            <H1>
+                <EditableText
+                    alwaysRenderInput={alwaysRenderInput}
+                    disabled={disabled}
+                    intent={intent}
+                    maxLength={maxLength}
+                    placeholder="Edit title..."
+                    selectAllOnFocus={selectAllOnFocus}
+                />
+            </H1>
+            <EditableText
+                alwaysRenderInput={alwaysRenderInput}
+                disabled={disabled}
+                intent={intent}
+                maxLength={maxLength}
+                maxLines={12}
+                minLines={3}
+                multiline={true}
+                placeholder="Edit report... (controlled, multiline)"
+                selectAllOnFocus={selectAllOnFocus}
+                confirmOnEnterKey={confirmOnEnterKey}
+                value={report}
+                onChange={handleReportChange}
+            />
+        </Example>
+    );
+};
diff --git a/packages/docs-app/src/examples/core-examples/index.ts b/packages/docs-app/src/examples/core-examples/index.ts
index 4c5d86b45d..fd6bf2c8e7 100644
--- a/packages/docs-app/src/examples/core-examples/index.ts
+++ b/packages/docs-app/src/examples/core-examples/index.ts
@@ -42,7 +42,8 @@ export * from "./dividerExamples";
 export * from "./dividerPlaygroundExample";
 export * from "./drawerExample";
 export * from "./dropdownMenuExample";
-export * from "./editableTextExample";
+export * from "./editableTextExamples";
+export * from "./editableTextPlaygroundExample";
 export * from "./entityTitleExample";
 export * from "./fileInputExample";
 export * from "./focusExample";
diff --git a/packages/docs-app/src/styles/_examples.scss b/packages/docs-app/src/styles/_examples.scss
index eed9430555..dfed9e584a 100644
--- a/packages/docs-app/src/styles/_examples.scss
+++ b/packages/docs-app/src/styles/_examples.scss
@@ -269,7 +269,24 @@
   }
 }
 
-#{example("EditableText")} {
+#{example("EditableTextBasic")},
+#{example("EditableTextMultiline")},
+#{example("EditableTextIntent")},
+#{example("EditableTextSelect")} {
+  .#{$ns}-editable-text {
+    max-width: 200px;
+    width: 100%;
+  }
+}
+
+#{example("EditableTextIntent")} {
+  .docs-code-example {
+    flex-direction: column;
+    gap: $pt-grid-size;
+  }
+}
+
+#{example("EditableTextPlayground")} {
   .docs-example {
     display: block;
   }