Creating the "switch" UI element

Even though that kind of control is pretty ubiquitous, they are not standard HTML form controls, so no, there is no built in element that behaves like that.

When you see them on a website, they were either coded specifically for it (using a combo of HTML, CSS and Javascript) or more likely part of the UI library the website is using.

On mobile, if the app is native it is likely using what the corresponding operating system provides to produce those controls. If it is running in a wrapper, like C3 exports do, they are doing the same thing a website would do to show them, either custom code or a library.

In my opinion, if you already found you can roll out your own relatively easily with just tapping support... go for that! More often than not you can get stuck in things that seem very important to you, but your users will most likely not even notice and will just roll with the control working properly by just tapping it.

If you still want to do it and know how to work with HTML, CSS and Javascript you can take a look at how popular UI libraries do it.

What version of Android? Go to any settings tab, those toggles are not draggable in Android 12 at least. If you're talking about a particular app, then it was manually implemented in that app by the developer.

Edit: Just tried implementing it myself, might not be quite so simple. Looks like C3 either doesn't support css positioning or overwrites it or something. I'll fiddle around with it some more to see if I can get something working.

Okay I experimented a bit and found that you can use it as is, copy and paste, if you use an html element object instead of a button/checkbox object.

Example here - dropbox.com/scl/fi/bxzdcams8yok369489fss/csstoggleexample.c3p

The way they have it set up is that they use a <span> element nested in the <input type="checkbox"> element, which is used as a flexible empty element for the visual shape and animation. You unfortunately can't do this with the built in button object, since you can only put text in that and not other html elements, and the css wizardry involved in making the animation don't work on the checkbox element itself (afaik anyways, might be worth experimenting with later). That's why in the linked example they just hide the checkbox, and use a visible <span> as a toggle switch.

That said, it does work as an HTML element. The problem is that you lose the button conditions - namely "Compare text" and "Is checked", and the actions "Set text" "Set checked" and "Toggle checked". I'd say this is mostly manageable, as you can use/compare a boolean instance variable on the html element as a condition, and similarly another instance variable to compare text. The HTML element has the "On clicked" and "On CSS animation ended" conditions, which should be sufficient for most use cases (use those to set the boolean instance variable to true or false).

I'll try some more things to see what I can do with the button object. I just learned that for checkbox type buttons in particular, the "Set CSS style" action applies the css to the <label> parent element, while the class property in the layout editor is applied actual <input type="checkbox"> element. However, you can also use the "Set attribute" action to give the <label> a class as well. The normal button doesn't have this quirk at all, since it doesn't generate nested elements and is just an <input type="button"> by itself.

Ps - Thanks again to the Construct team for implementing css and html support, it really opens up a lot of possibility for some slick UI implementations, which a lot of users ask for. Too bad it's not particularly accessible for those not really familiar with CSS, and also the minor issue of not having control of the structure of element nesting (mostly solved by having the HTML object now, but then we don't get the ACEs for the form elements as above).