How to indent inside any UI element

<1 min. read

Need to indent items in UI elements that don't support it, like the Checkbox group or Radio Button Group?

  1. Duplicate your UI element
  2. Remove lines that need to be indented from the first one
  3. Remove all lines except indented ones from the second one
  4. Overlay second UI element on the first one
  5. Select both UI elements (easest to do with CTRL \ + A)
  6. Group the UI elements together from the menu (or press CTRL \ + G)

gif

You can even transform the group to a component. This will make it easier to use from the UI library or search.

Author

Virgin Pereira
Virgin Pereira

Customer Success @ Balsamiq

Questions or feedback? Email virgin@balsamiq.com.

Related articles


How to add a background color to any UI element

A trick to add backgrounds to any UI element in Balsamiq.

How to add a blank row to a combobox or menu element

A neat trick to add a blank row to two common Balsamiq UI elements.

How to keep form labels aligned

A neat trick to keep labels in Balsamiq wireframes aligned even after editing them.


Other topics you might be interested in

Our monthly emails will make you better at your job

Get our inside stories on product design, making things people love, and running a business built to last. Delivered once a month to your inbox.