# betterdocs/4.9.5/react-src/gutenberg/util/toggle-button/index.js

BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot, version 4.9.5. 48 lines.

- Page: https://pluginprobe.com/plugins/betterdocs/4.9.5/code/react-src/gutenberg/util/toggle-button/index.js
- Raw: https://pluginprobe.com/plugins/betterdocs/4.9.5/raw/react-src/gutenberg/util/toggle-button/index.js
- Modified: 2026-10-12T10:07:14+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/betterdocs/4.9.5/code/react-src/gutenberg/util/toggle-button/index.js#L10-L20`.

```javascript
const { useEffect, useState } = wp.element;

const ToggleButton = ({ options, onChange, defaultSelected }) => {
  const [selected, setSelected] = useState(defaultSelected || options[0]);

  useEffect(() => {
    onChange(selected.value);
  }, [selected]);

  useEffect(() => {
    if (defaultSelected) {
      setSelected(defaultSelected);
    }
  }, [defaultSelected]);

  return (
    <div id="switch" className="eb-switch-control">
      {options.map((option) => (
        <label>
          <input
            type="radio"
            name="gh"
            placeholder="name"
            onChange={() => setSelected(option)}
          />
          <span
            style={{
              color: selected.value === option.value ? "white" : "black",
            }}
          >
            {option.label}
          </span>
        </label>
      ))}
      <span
        className="slideBg"
        style={{
          backgroundColor: "#551ef7",
          transform:
            selected == options[0] ? "translateX(0)" : "translateX(100%)",
        }}
      />
    </div>
  );
};

export default ToggleButton;

```