diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7101c14eb..87c0d3328 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
- `utils`
- `useComputedStyleFallback` option for `CssCustomProperties`: if the CSSOM does not provide any property name for the used selector, e.g. because the declarations are part of a constructed and adopted stylesheet, then the names are read from the computed style of the matching element; disabled by default because the computed style also contains all inherited custom properties
+- ``
+ - `noDrag` parameter: Add the `nodrag` class to the Switch element. Default: `true`
### Changed
diff --git a/src/components/Switch/Stories/Switch.stories.tsx b/src/components/Switch/Stories/Switch.stories.tsx
index f4967c89d..470caa2c3 100644
--- a/src/components/Switch/Stories/Switch.stories.tsx
+++ b/src/components/Switch/Stories/Switch.stories.tsx
@@ -23,3 +23,14 @@ WithStateLabel.args = {
innerLabel: "Off",
innerLabelChecked: "On",
};
+
+/**
+ * By default the `nodrag` class is set, so the switch cannot be used to drag a surrounding element,
+ * e.g. a React Flow node. Set `noDrag` to `false` to remove the class and allow the drag interaction.
+ */
+export const WithoutNoDragClass = Template.bind({});
+WithoutNoDragClass.args = {
+ ...Default.args,
+ label: "Switch label, drag interaction not prevented",
+ noDrag: false,
+};
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index 27e5cb026..d53dacee1 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -17,18 +17,23 @@ export interface SwitchProps extends Omit {
* class names
*/
className?: string;
+
+ /** Adds the 'nodrag' class to the element, preventing dragging via the Switch element. Default: true */
+ noDrag?: boolean;
}
-export const Switch = ({ onChange, className, label, ...otherProps }: SwitchProps) => {
+export const Switch = ({ onChange, className, label, noDrag = true, ...otherProps }: SwitchProps) => {
const handleChange = (e: React.ChangeEvent) => {
if (onChange) {
onChange(!!e.target?.checked);
}
};
+ const noDragClass = noDrag ? "nodrag " : "";
+
return (