Rebound: On / Off Toggle

Tags

1. 2 checkbox
2. 2 toggle

12 Responses

1. Pro Nathan Smith

   Here's the on/off toggle I posted earlier, in actual working code. It's a class on a <label> that wraps around a visibility:hidden checkbox. JavaScript looks to see if the checkbox is checked or unchecked, and adjusts the background position accordingly.

   You might wonder: Why not just use a checkbox? We wanted this UI to imply immediate effect, rather than the user wonder if they needed to go click a submit button somewhere.

   almost 2 years ago

2. Pro Rogie

   Really good logic behind it's use Nathan. Awesome.

   almost 2 years ago

3. Pro Eren Emre

   "You might wonder: Why not just use a checkbox? We wanted this UI to imply immediate effect, rather than the user wonder if they needed to go click a submit button somewhere."

   Clever!

   almost 2 years ago

4. Pro Jesse Gardner

   I love how the text color reflects on the switch. Nice attention to detail. So freaking slick!

   almost 2 years ago

5. Daniel Marino

   I'm diggin' it

   almost 2 years ago

6. Pro Chandler Van De Water

   Awww, man, you didn't add any green glow to the inside of the button....
   Logic makes a lot of sense, though. Brainstapaper-ed.

   almost 2 years ago

7. Jeff L

   I definitely appreciate the logic behind why you used this control.

   That said, I've never been a big fan of these. I never know where to click. When it's in the 'off' state, you have to click the word 'off' to turn it on? Always seemed backwards to me. I usually attempt to click and drag the button to the other side, as it looks more like as slider.

   almost 2 years ago

8. Pro Nathan Smith

   @Chandler - I tried it with a little more glow, but it looked a bit eerie. I think the slider has *just* enough, calling a bit more attention to it. Whereas, adding glow to the inset just made the whole thing look kinda Alienware-ish. :)

   almost 2 years ago

9. Darren Emory

   @Nathan — can we get a live demo? I want to click to play around with it...

   almost 2 years ago

10. Pro Nathan Smith

    @Darren - Sorry, but it's for a subscription based web app. :(

    almost 2 years ago

11. Branden Silva

    When are you going to make us a sweet tutorial on this Nathan? :P

    almost 2 years ago

12. 

    Feature Configuration This interface will allow our users to turn specific features in our application on or off. Reusing Nathan's switch interaction was a no-brainer. When the ... September 10, 2010

    Rebound

    Feature Configuration

    by David Brooks

    This interface will allow our users to turn specific features in our application on or off. Reusing Nathan's switch interaction was a no-brainer.

    When the user clicks a feature, the switch appears in the ribbon and the configuration appears to the right.

    • 0
    • 6
    • 445

    over 1 year ago