Post Image

Don’t Settle for Default Radio Buttons — Make ’em Your Own

Ben Gremillion
By Ben Gremillion on 17th April, 2017

Not all assets are created equally.

Every design system has its own style, whether it’s based on an existing framework or completely home-brewed. For example, some systems for websites and apps rely on plain HTML elements and let the browser display whatever they’re programmed to display. But they don’t have to.

Take radio buttons. Radio buttons let people select one option from a series. They’re long-standing HTML elements that every major browser renders with ease. But certain looks, like Google Material Design Lite, don’t follow browsers’ built-in radio button styles.

Colorful radio buttons demo

If you want to stylize your forms, here’s how to make your own radio buttons.

1. Find radio elements

Aside from the traditional ones, many graphic radio buttons exist. Look no further than Google’s own set — of which you can find as simulated, colorable vectors in UXPin. Create one in your tool of choice and copy it for each option you want to give users.

Create three “off” buttons

Color them to suit your needs (although for demo purposes we’ll stick with black). Then repeat the process with three “on” buttons, placing them on top of the “off” buttons.

Add “on” radio buttons

2. Create states

Each radio button has two settings: on and off.

In UXPin, select all pairs of radio buttons and give them two more states, turning them into a multistate element (MSE).

Create a multistate element

This turns the six radio buttons into one “element” with three views, one for each active button. But you need to edit each state to reflect that. To do so, go through each state and hide the appropriate radio buttons using the left-land layers menu.

Turn off radio buttons

3. Add interactive hotspots

Hotspots are invisible layers that act as triggers for interactions. Since the entire set of radio buttons is effectively one design “element,” put a hotspot over each radio button and its label. Then add an interaction to each: on click, set state of “Multistate 1” to state 1, 2, or 3, depending on to which hotspot you’re adding the interaction.

Add hotspots

The result: a set of radio buttons that fit into your customized design system better than plain ol’ HTML-based elements.

Every design system has its own style, whether it’s based on an existing framework or your own design. Some systems for websites and apps rely on plain HTML elements and let the browser display whatever they’re programmed to display. Others, like the custom set you’ve seen here, enhance your design system with its own aesthetic.

Join the world's best designers who use UXPin.

Sign up for a free trial.
Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you