UI cheat sheet: radio buttons, checkboxes, and other selectors - Deepstash

Bite‑sized knowledge

to upgrade

your career

Ideas from books, articles & podcasts.

UI cheat sheet: radio buttons, checkboxes, and other selectors

We take a look at selectors and how they differ from each other, focussing on two components (radio buttons and checkboxes) side by side for easier comparison — while also comparing them to a few others.

This includes:

  • What selectors are
  • What is the difference between radio buttons and checkboxes
  • Common styles of selectors
  • States
  • Rules for label text
  • When you should use them
  • Accessibility checklist

STASHED IN:

2

MORE IDEAS FROM THE SAME ARTICLE

  1. Does your selector meet the WCAG AAA colour contrast standards? Some designers use the AA standards instead, but I’m far too paranoid for that. My current favourite contrast checker is 
WebAIM...

A selector is an input field where the user has to select one (or more) options, unlike a text field where the user has free rein. Selectors come in all different shapes and forms. Dropdowns, checkboxes, toggles, sliders, and more are all different types of selectors, yet they look nothing like e...

Radio buttons and checkboxes are very similar, except for a few key differences. The primary difference is that with radio buttons you can only select one item, while with checkboxes you can select any number.

Checkboxes and radio buttons have to change their state/appearance so that users know they have been selected. We need to add these little visual cues to nudge the user in the right direction using patterns that they already know and understand.

Types: 

  • Active
  • Inacti...

  • Standard style (radio buttons/checkboxes)
  • Quiz button style (radio buttons/checkboxes)
  • Basic image style (radio buttons/checkboxes)
  • Image in a grid style (single/multi-select)
  • Multi-level checkboxes
  • Forced selection
  • Button style (single/multi-s...

  1. Make sure that the case on every selector label is the same (sentence case, title case, etc.)
  2. Make sure that all items either end in a period or not.
  3. Try to make sure that all the items are either a sentence, phrase, or word.
  4. Above all, be consistent.

  • When you only want the user to select one item
  • If you have fewer than six options
  • You want to force a selection of one
  • If the question only has two options t...

  • When you want the user to be able to select multiple options or none at all
  • Single item(Like agreeing to T&C)

IDEA ABOUT

Discover and save more ideas by creating a

FREE

Deepstash account.

Develop a

reading habit

, save

time

and create an amazing

knowledge library

.

GET THE APP:

MORE LIKE THIS

Testing in React Native

As your codebase expands, small errors and edge cases you don’t expect can cascade into larger failures. Bugs lead to bad user experience and ultimately, business losses. One way to prevent fragile programming is to test your code before releasing it into the wild.

There is more value in te...

5

STASHED IN:

8

Homepage Space Design Elements: Designing Carousels

Carousels allow multiple pieces of content to occupy a single, coveted space. This may placate corporate infighting, but on large or small viewports, people often scroll past carousels.

A static hero or integrating content in the UI may be better solutions. But if a carousel is your hero,...

STASHED IN:

7

One of the most important times for a design review is at the end of a development sprint. A design review evaluates whether or not the developed product is in line with the original creative vision and user experience. In other words, it’s a review of the developed project which helps to verify ...

1

STASHED IN:

5