The Scale Block can be used in many ways to provide a user-friendly and clear way to present information, be it progress in a process, evaluation of products or preference selection. It enables effective interactions and feedback, and also facilitates comparison of items.

After clicking on a building block, you’ll find the Content section on the right. This is where you add and edit the block’s main elements.

Use the label to make your request or control the user's selection. Labels help users understand what’s being asked, and they’re important for accessibility, especially when using screen readers or other assistive technologies. Add more labels if needed.

Select how many options you want to display to represent the user rating. You can also change the name of each option, which will be reflected in your responses.

After clicking on a building block, you’ll find the Settings section on the right. This is where you can customize the block’s options, appearance, and behavior to tailor it perfectly to your flow.

Control key settings for the block, including making values sensitive so they aren’t stored in our database and setting the block as required, making it mandatory for users to select an option before proceeding.

Decide whether you want to show tooltips. A tooltip is an element displayed as an informational text box when hovering over an item. This usual indicated the amount that is being hovered over. Also decide whether you want to display a label above your rating scale as well as your previously set up option labels.

Select the amount of options that are preselected by default and decide whether you want to implement a navigation after clicking on the element.

System Labels define how your data is stored and organized, while Variables let you reference and display that data dynamically throughout your flow. You can set a label for the whole block to keep your data structured and easy to use.

Set the block’s visibility to show only on mobile, desktop, or hide it completely. You can also decide how many columns appear per row on mobile and desktop devices. Additionally, you can select a background color for the block.

Control the block’s layout by adjusting its width (S, M, L, or maximum) and setting the block's padding from the top, bottom, left, and right.

After clicking on a building block, you’ll find the Design section on the right. You can quickly apply a preset style tailored to that block type. Also, customize colors, fonts, and spacing to match your flow.

When you apply a design to one block type, it automatically updates all blocks of that type across your flow. This keeps your design consistent, clean, and easy to maintain without styling each block manually.

Also see Heyflow's other design options to individualize your flow and building blocks even more: