Skip to content

Bubble plugin · Inputs & forms

The Bubble Switch (Toggle) and Checkbox plugin in Next.js

A React component that ships with your app: a switch input.

Partly converts · 4 of 8 parts

By The deBub teamUpdated

On this page

01What it becomes

A React component that ships with your app: a switch input. The plugin’s switch becomes a React toggle with the same colors, borders and handle styling, its value state, change event and actions.

No extra npm package: the generated code uses React, Next.js and browser APIs only.

02What converts

  • Switch with on / off / disabled styling and initial value
  • Value state, “changed” event, set value and toggle actions

03Not converted yet

  • The plugin’s custom checkbox element

Where your app uses one of these, the generated code keeps a marked placeholder in the right place and your report lists it, so it can be finished with the assistant or by any developer. The rest of the plugin works as described above.

04About this plugin

✳️ Switch (Toggle) and Checkbox.

Questions

Does the Switch (Toggle) and Checkbox plugin work outside Bubble?
Not as it is: Bubble plugins only run inside Bubble. In a Next.js app it is replaced by generated code — A React component that ships with your app: a switch input.
Will my Switch (Toggle) and Checkbox settings carry over?
Mostly. deBub converts 4 of the plugin’s 8 parts from your .bubble export; anything else is marked in the code and listed in your report. Secret keys are added as environment variables.

The deBub team

We build the Bubble → Next.js compiler behind deBub. Spotted something out of date? Write to hello@debub.io.

All 45 plugins

A React component that ships with your app: icons, toggle, range slider and checkbox

Converts

A React component that ships with your app: a multi-select with tags

Converts

A React component that ships with your app that reads an input as the user types

Converts

Leave Bubble.
Keep building.

The scan is free and shows your exact price. No card needed until you choose to generate.

Start with a free scan