Building an Inline Editable Checkbox Field in Sitecore XM Cloud

SitecoreAI provides content authors with inline editing for text, rich text, date, and link fields, making content management fast and intuitive. However, checkbox fields do not have native inline editing support in Page Builder.

This creates a common pain point: content editors cannot quickly toggle boolean values (like “Closed,” “Featured,” or “Active”) without a clunky workaround. Developers often resort to custom forms, separate pages, or non-intuitive modals — leading to poor UX, slower updates, and more maintenance overhead.

Our solution is to create a custom inline-editable checkbox component that integrates seamlessly with Sitecore Pages Builder and the Content SDK, giving editors the ability to toggle values directly on the page.

Step 1: Create the Editable Checkbox Component

This component handles:

• Rendering a standard checkbox in the browser
• Detecting Sitecore editing mode
• Sending updates securely through a GraphQL authoring API

Step 2: Usage in a Page Builder Component

Example usage for a “Closed” field inside a weekly hours tab:

Step 3: Secure API Route to Update Checkbox

Because we should never call Sitecore’s authoring endpoint directly from the browser, a secure Next.js API route is used:

Once you have the above:

• Editors can toggle checkboxes directly in the Page Builder canvas.
• Unique IDs prevent conflicts when used in loops.
• Updates go through a secure GraphQL authoring API, keeping your solution safe.

This approach can be extended to other boolean fields, feature flags, or even multi-select toggles. Hope someone will find this useful!