My UI allows users to specify values that may be "bound" to other values. In the simple case, I want to present friendly input elements like checkboxes and password boxes. But I also need a way to allow advanced users to "bind" the value to another value (much like the way Expression Blend allows you to enter values, or bind them).

Here's what I have so far. Here we have two checkboxes:

Example with two checkboxes

But when the user clicks the little square on the right-hand side, they can enter a raw value or bind it using an expression:

Example with bound values

See the JSFiddle for this

Are there better ways the 'binding toggle' buttons could be displayed that would make it more user friendly, keeping in mind that there might be dozens of these inputs on a single page?

Are there any other examples of this on the web that I can look at for inspiration?


The current design is very confusing. One solution could be more like old school:


download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.