Toggles

Adding and styling toggles.

What Are Toggles?

A toggle is a switch button. They are interactive UI elements that allow users to switch between two states, such as "on" and "off," "enabled" and "disabled," or "active" and "inactive." They provide a visual representation of the current state and can be used to control settings, options, or features.

Location in the Parts Library: Base Parts > Data Input > Toggle

Example Toggle Parts

Adding a Toggle

Choose the toggle most closely aligned with what you need from the Parts Library.

Select the part where you’d like to add your toggle and click ‘+ add to page’.

Applying an ID

Your toggle will need to be given an ID, which is an identifier for the toggle. For example, if the Toggle is for activating dark or light mode, then you might give it an identifier such as ColorMode, or something that indicates to you what the toggle is about. When you give your toggle an ID, that ID automatically gives the toggle a State. You can see this when you click on the State Model property in the right property panel.

Each toggle needs its own unique ID.

Styling the Toggle

Like many other parts, opacity, rounding, colors, and spacing can be applied using the property editor on the right, once the toggle has been selected.

Any text next to the toggle can be changed using the Text Editor and styled using the Font Editor. You can change the font family, size, weight, line height, and style.

Sizing

Toggles come with preset sizes, as well as the ability to set the exact size. The preset sizes can be made responsive.

For example, you may want the toggle to be small or extra small on mobile, and larger on a laptop.

Sizing Toggle Parts

More information on toggles is coming soon.

Related Information

Text

Customizing and formatting