# code-snippets/3.10.0/js/components/EditMenu/EditorSidebar/controls/ActivationSwitch.tsx

Code Snippets, version 3.10.0. 43 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/3.10.0/code/js/components/EditMenu/EditorSidebar/controls/ActivationSwitch.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/3.10.0/raw/js/components/EditMenu/EditorSidebar/controls/ActivationSwitch.tsx
- Modified: 2026-08-24T09:38:40+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/code-snippets/3.10.0/code/js/components/EditMenu/EditorSidebar/controls/ActivationSwitch.tsx#L10-L20`.

```tsx
import React, { useId } from 'react'
import { __ } from '@wordpress/i18n'
import { useSnippetForm } from '../../SnippetForm/WithSnippetFormContext'
import { SubmitSnippetAction, useSubmitSnippet } from '../../../../hooks/useSubmitSnippet'
import { handleUnknownError } from '../../../../utils/errors'

export const ActivationSwitch = () => {
	const { snippet, isWorking } = useSnippetForm()
	const { submitSnippet } = useSubmitSnippet()
	const activationSwitchId = useId()

	return (
		<div className="inline-form-field activation-switch-container">
			<label htmlFor={activationSwitchId} id="snippet-activation-switch-label">
				{__('Status', 'code-snippets')}
			</label>

			<span className="status-text">
				{snippet.active
					? __('Active', 'code-snippets')
					: __('Inactive', 'code-snippets')}
			</span>

			<input
				id={activationSwitchId}
				type="checkbox"
				checked={snippet.active}
				disabled={isWorking || !!snippet.shared_network}
				className="switch"
				aria-labelledby="snippet-activation-switch-label"
				onChange={() => {
					submitSnippet(
						{ id: snippet.id, network: snippet.network, active: !snippet.active },
						snippet.active ? SubmitSnippetAction.SAVE_AND_DEACTIVATE : SubmitSnippetAction.SAVE_AND_ACTIVATE
					)
						.then(() => undefined)
						.catch(handleUnknownError)
				}}
			/>
		</div>
	)
}

```