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 each other.&nbsp;The main functional difference between these types of selectors is how many options the user can pick: one or more.

What are Selectors

<ol><li>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&nbsp;</li></ol><a class="idea-content-link" href="https://webaim.org/resources/contrastchecker/">WebAIM</a><ol><li>Are your options/items bigger than 44px for touch screens? (Differing reports use 36px.)</li><li>Is there more than 8px between each option/item?</li><li>Is the label/question always visible?</li><li>Do the relevant fields have helpful feedback text? (E.g. “Please complete this question”)</li></ol>

Accessibility Checklist

<ul><li dir = "auto">When you want the user to be able to select multiple options or none at all</li><li dir = "auto">Single item(Like agreeing to T&amp;C)</li></ul>

When To Use Checkboxes

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

Label Text: The Rules

<ul><li dir = "auto">When you only want the user to select one item</li><li dir = "auto">If you have fewer than six options</li><li dir = "auto">You want to force a selection of one</li><li dir = "auto">If the question only has two options that are yes/no</li><li dir = "auto">If you want your users to click ‘save’ to implement the option</li></ul>If your option’s labels are short, consider using a multiple-choice toggle.

When To Use The Radio Button

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:<ul><li>What selectors are</li><li>What is the difference between radio buttons and checkboxes</li><li>Common styles of selectors</li><li>States</li><li>Rules for label text</li><li>When you should use them</li><li>Accessibility checklist</li></ul>

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

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.

Difference between Radio Buttons and Checkboxes

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:&nbsp;<ul><li>Active</li><li>Inactive</li><li>Hover</li><li>Focussed</li><li>Highlighted</li><li>Pressed</li><li>Selected</li><li>Fail Feedback</li></ul>

States

<ul><li>Standard style (radio buttons/checkboxes)</li><li>Quiz button style (radio buttons/checkboxes)</li><li>Basic image style (radio buttons/checkboxes)</li><li>Image in a grid style (single/multi-select)</li><li>Multi-level checkboxes</li><li>Forced selection</li><li>Button style (single/multi-select)</li><li>Toggle (single select)</li></ul>

Common Styles

Pick me! Pick me! No, pick me! In today’s cheat sheet we will be looking at selectors and how they differ. Unlike most of my other cheat sheets, this will focus on two components (radio buttons and…

States

Similar ideas to States

Move to Scalable Online Platform