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 checkboxes) side by side for easier comparison — while also comparing them to a few others.

選我！ 選我！ 不，接我！ 在今天的備忘單中，我們將研究選擇器及其區別。 與我的大多數其他備忘單不同，本手冊將并排關注兩個組件(單選按鈕和復選框)，以便于進行比較，同時還將它們與其他幾個組件進行比較。

In this cheat sheet we will cover the following:

在本備忘單中，我們將介紹以下內容：

1. What selectors are
   什么是選擇器
2. Anatomy of checkboxes and radio buttons
   復選框和單選按鈕的剖析
3. What is the difference between radio buttons and checkboxes
   單選按鈕和復選框之間有什么區別
4. Common styles of selectors
   選擇器的常見樣式
5. States
   狀態
6. Rules for label text
   標簽文字規則
7. When you should use them
   什么時候應該使用它們
8. Accessibility checklist
   輔助功能清單
9. Closing thoughts
   總結思想

1.什么是選擇器 (1. What selectors are)

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, like Lady Gaga’s hairstyles, 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. The main functional difference between these types of selectors is how many options the user can pick: one or more.

選擇器是一個輸入字段，用戶必須在其中選擇一個(或多個)選項，這與文本字段中用戶可以自由使用的輸入區不同。 選擇器(例如Lady Gaga的發型)具有各種不同的形狀和形式。 下拉菜單，復選框，切換按鈕，滑塊等都是不同類型的選擇器，但它們看起來并不相似。 這些類型的選擇器之間的主要功能區別是用戶可以選擇多少個選項：一個或多個。

In a perfect world, where there was no more starvation, animal poaching, greenhouse gases, or crime, I would start a petition to change radio buttons to ‘single selectors’ and checkboxes to ‘multi-selectors’. I think they describe what they are much better, but, alas, these legacy names are too ingrained and we are probably stuck with them.

在一個完美的世界中，不再有饑餓，偷獵，溫室氣體或犯罪的發生，我將開始請愿，將單選按鈕更改為“單個選擇器”，將復選框更改為“多重選擇器”。 我認為它們描述了它們要好得多的地方，但是，these，這些舊名稱太根深蒂固，我們可能會堅持使用它們。

2.剖析復選框和單選按鈕 (2. Anatomy of checkboxes and radio buttons)

While we will look at various selector types in this cheat sheet, we will focus on radio buttons and checkboxes. Below is their anatomy.

雖然我們將在本備忘單中介紹各種選擇器類型，但我們將重點介紹單選按鈕和復選框。 以下是其解剖結構。

Note: There is some discrepancy in which of the parts above are referred to as the ‘radio button’/’checkbox’. Sometimes people use ‘radio button’/’checkbox’ to refer to the label and the selector together, while other times they use the terms to refer to the selector alone. I prefer the latter.

注意：上面的哪些部分被稱為“單選按鈕” /“復選框”，存在一些差異。 有時人們使用“單選按鈕” /“復選框”來同時指代標簽和選擇器，而有時他們使用術語單獨指代選擇器。 我更喜歡后者。

3.單選按鈕和復選框之間有什么區別 (3. What is the difference between radio buttons and checkboxes)

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. I was going to write out a table to explain this, but didn’t because a) it sounded boring, b) Medium doesn’t allow you to insert tables, so I had a better idea:

單選按鈕和復選框非常相似，除了一些關鍵區別。 主要區別在于，使用單選按鈕只能選擇一項，而使用復選框可以選擇任何數字。 我打算寫一張表來解釋這一點，但是不是因為a)聽起來很無聊，b)Medium不允許您插入表，所以我有一個更好的主意：

POP QUIZ! Yay! Let’s see who can get 100% — winner gets to buy me an apple and call me ‘ma’am’.

突擊測驗！ 好極了！ 讓我們看看誰能獲得100％的收益-獲勝者可以給我買一個蘋果，稱我為“夫人”。

ONE: In the standard checkbox component, how many items are you allowed to select (unless otherwise stated)?

一個：在標準復選框組件中，允許您選擇幾項(除非另有說明)？

1. 1
   1個
2. 3
   3
3. Unlimited
   無限
4. 0
   0

TWO: What is the shape of a radio button’s selector?

二：單選按鈕選擇器的形狀是什么？

1. Square
   廣場
2. Circle
   圈
3. Hexagon
   六邊形
4. Triangle
   三角形

THREE: If you want to make a UI where a user can select multiple toppings to put on an ice cream, you would use:

第三：如果要創建一個用戶可以在其中選擇多個澆頭以放置冰淇淋的UI，則可以使用：

1. Radio buttons
   單選按鈕
2. Checkboxes
   選框

FOUR: If you want to make a UI where a user can select what type of bank account they would like to open, you would use:

第四：如果要創建一個用戶可以在其中選擇他們想開設哪種銀行帳戶的用戶界面，則可以使用：

1. Radio buttons
   單選按鈕
2. Checkboxes
   選框

FIVE: If you wanted to create a ‘subscribe to our emailer’ selector, which selector type would you use?

五：如果您想創建“訂閱我們的電子郵件發送者”選擇器，您將使用哪種選擇器類型？

1. A radio button
   單選按鈕
2. A checkbox
   復選框

SIX: In the below image, which is a radio button?

六：在下圖中，哪個是單選按鈕？

1. A
   一個
2. B
   乙

ANSWERS: ONE: 3. Unlimited TWO: 2. Circle THREE: 2. Checkboxes FOUR: 1. Radio buttons FIVE: 2. A checkbox SIX: 1. A

答案：一個：3.無限兩個：2.圈三：2.復選框四個：1.單選按鈕五個：2.一個復選框六個：1. A

WOOOOO you passed! (I hope.)

你通過了！ (我希望。)

4.選擇器的常見樣式 (4. Common styles of selectors)

These are some of the common styles of checkboxes and radio buttons that you will come across in your field trip through the internet.

這些是復選框和單選按鈕的常見樣式，您在通過Internet進行實地考察時會遇到這些樣式。

標準樣式(單選按鈕/復選框) (Standard style (radio buttons/checkboxes))

The most standard style of checkboxes and radio buttons uses buttons with ‘checkmarks’ or filled-in circles. I tend to prefer buttons with a checkmark UNLESS you are dealing with educational quizzes (see below).

復選框和單選按鈕的最標準樣式使用帶有“復選標記”或實心圓圈的按鈕。 我傾向于使用帶有復選標記的按鈕，除非您正在處理教育性測驗(請參閱下文)。

測驗按鈕樣式(單選按鈕/復選框) (Quiz button style (radio buttons/checkboxes))

When a user is answering questions in a quiz, we have to make sure of two things: 1) that they can clearly see what answers they are choosing, 2) that they don’t get confused about when they get feedback on their answer.

當用戶在測驗中回答問題時，我們必須確保兩件事：1)他們可以清楚地看到他們選擇的答案，2)當他們對自己的答案獲得反饋時不會感到困惑。

If you look at the example below, you can see that the ‘checkmark’ can get confusing — it looks like those answers are correct, even though it hasn’t been graded yet.

如果您看下面的示例，您會發現“復選標記”可能會令人困惑-看起來這些答案是正確的，即使尚未對其評分。

基本圖像樣式(單選按鈕/復選框) (Basic image style (radio buttons/checkboxes))

While this style of selector can give the user a better idea of what they are selecting, I seldom use them as the image will always be too small to see clearly anyway.

雖然這種選擇器樣式可以使用戶更好地了解他們所選擇的內容，但我很少使用它們，因為無論如何圖像總是太小而看不清。

網格樣式的圖像(單選/多選) (Image in a grid style (single/multi-select))

I prefer this style to the basic image style as you are able to make the images a lot bigger, and it also just looks better.

與基本圖像樣式相比，我更喜歡這種樣式，因為您可以使圖像更大，而且看起來也更好。

I first became aware of this style in Buzzfeed’s quizzes. (If you have never heard of Buzzfeed’s quizzes — a whole new world of procrastination awaits you.) Here they just show the image and have no text. If you go with that layout, pretty please make sure that you have alt text for users who use a screen reader or have a poor internet connection.

我首先在Buzzfeed的測驗中意識到了這種風格。 (如果您從未聽說過Buzzfeed的測驗，那么整個拖延世界都在等待著您。)在這里，它們只是顯示圖像而沒有文字。 如果使用這種布局， 請確保您為使用屏幕閱讀器或互聯網連接狀況不佳的用戶提供替換文字 。

多級復選框 (Multi-level checkboxes)

Multi-level checkboxes are needed if the items need to be split up into groups. Also, notice that if only a few of the child items are selected, the parent category is only partially selected.

如果需要將項目分成幾組，則需要多級復選框。 另外，請注意，如果僅選擇了幾個子項，則僅部分選擇了父類別。

One of the trickier UI elements around this is that the top item (parent) acts both as a selector and an accordion. So, if you click the label does it select the selector or does it open/close the accordion? I can’t find any definitive research on which way is the best, as this is a bit of an unusual pattern, but in the past, I have made the label part of the accordion and not the selector. Let me know if you have any suggestions for how to deal with this dilemma in the comments.

與此相關的較為棘手的UI元素之一是，頂級項(父項)既充當選擇器又充當手風琴。 因此，如果您單擊標簽，它是選擇選擇器還是打開/關閉手風琴？ 我找不到關于哪種方法最好的確定性研究，因為這是一種不尋常的模式，但是在過去，我已經將標簽設置為手風琴的一部分，而不是選擇器的一部分。 如果您有任何關于如何解決此難題的建議，請告訴我。

強制選擇 (Forced selection)

Sometimes you will only want to allow your users to select a certain number of an item. To force this, if the user clicks one more than the selected amount, their oldest selection will deselect and the recent selection will update.

有時，您只希望允許用戶選擇一定數量的項目。 要強制執行此操作，如果用戶單擊的次數多于所選數量，則他們最早的選擇將被取消選擇，而最近的選擇將被更新。

按鈕樣式(單選/多選) (Button style (single/multi-select))

This style allows you to stack a whole lot of different items on top of each other, which means you get to save space and have more options. Because this pattern isn’t that common, I suggest that you let the user know how many options they can select. While there is no reason to not use this for single selectors, I have never seen it in the wild.

這種樣式使您可以將很多不同的項目彼此堆疊，這意味著您可以節省空間并有更多選擇。 因為這種模式并不常見，所以建議您讓用戶知道他們可以選擇多少個選項。 盡管沒有理由不對單個選擇器使用它，但我從未在野外看到它。

This style is very common when asking the user to choose multiple content tags (although they may not be aware of it). In the below example, Apple Music is asking users to select their favourite genres, which will in turn recommend songs and artists based on the user’s selection.

當要求用戶選擇多個內容標簽時，這種樣式非常普遍(盡管他們可能不知道)。 在下面的示例中，Apple Music要求用戶選擇自己喜歡的流派，這將根據用戶的選擇推薦歌曲和歌手。

切換(單選) (Toggle (single select))

The toggle is most often used for settings and allows the user to choose between yes/no options.

切換開關最常用于設置，并允許用戶在是/否選項之間進行選擇。

On mobile, the toggle itself usually sits on the far right while the label sits on the far left. This is to make it easier for the right thumb to change options.

在移動設備上，切換開關本身通常位于最右側，而標簽位于最左側。 這是為了使右手拇指更容易更改選項。

5.國家 (5. States)

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.

復選框和單選按鈕必須更改其狀態/外觀，以便用戶知道已被選中。 我們需要添加這些小的視覺提示，以使用他們已經知道和理解的模式將用戶向正確的方向移動。

默認/有效 (Default/active)

This is the starting state of selectors. This state indicates to the user that they can click the items in the questions.

這是選擇器的開始狀態。 此狀態向用戶指示他們可以單擊問題中的項目。

不活躍 (Inactive)

When the inactive state is set, the user won’t be able to interact with the options. It is seldom that a user will encounter this state unless the product rules specify it.

設置為非活動狀態后，用戶將無法與選項進行交互。 除非產品規則指定，否則很少有用戶會遇到此狀態。

徘徊 (Hover)

Like buttons, selectors should indicate to the users that they are interactive or clickable. Usually this is done with highlighting the background of the item on hover. It also indicates what area of the items is clickable. If you hover off it, it should revert to its original state.

像按鈕一樣，選擇器應向用戶指示它們是交互式的或可單擊的。 通常，這是通過突出顯示懸停項目的背景來完成的。 它還指示可單擊項目的哪個區域。 如果將鼠標懸停在它上面，它應該恢復為原始狀態。

Don’t be a n00b tip: Touch devices don’t have a hover state.

不要成為提示：觸摸設備沒有懸停狀態。

重點/突出顯示 (Focus/highlighted)

The focus or highlighted state is usually indicated with a blue halo around the clickable item. You can see this for yourself by tabbing through an interface — which is the same thing someone who is poor sighted or had poor motor skills would do. It is seldom that a user will encounter this state, unless before someone clicks ‘enter’ to select an item.

焦點或突出顯示狀態通常在可點擊項周圍顯示為藍色光暈。 您可以通過在界面上切換來親自看到這一點，這與視力不佳或運動技能較弱的人一樣。 用戶很少會遇到這種狀態，除非在用戶單擊“輸入”以選擇一個項目之前。

按下 (Pressed)

This is the state where the user holds down their mouse/finger and the item indicates back to the user that it is being clicked.

這是用戶按住鼠標/手指，并且該項目向用戶指示其正在被單擊的狀態。

已選 (Selected)

Once the user has clicked an item, the UI should let them know. As mentioned earlier, radio buttons can only have one selected item, while checkboxes can have multiple, depending on business rules.

用戶單擊項目后，UI應告知他們。 如前所述，根據業務規則，單選按鈕只能選擇一個項目，而復選框可以選擇多個。

失敗反饋 (Fail feedback)

With free text input, it is possible for a user to make a typo, etc. However, since the options in a selector are predetermined, there should only be one type of fail feedback: the ‘incomplete’ type, which the user will only receive if they click the ‘submit’ button before they finished filling out the form. For checkboxes, this will only be necessary if the question forces them to choose one or more items.

使用自由文本輸入時，用戶可以打錯字等。但是，由于選擇器中的選項是預先確定的，因此應該只有一種類型的失敗反饋：“不完整”類型，用戶只會如果他們在填寫表單之前單擊“提交”按鈕，則會收到。 對于復選框，僅當問題迫使他們選擇一項或多項時，才需要這樣做。

6.標簽文字規則 (6. Rules for label text)

There is only one hard and fast rule for selector labels: be consistent.

選擇器標簽只有一條硬性規定： 一致 。

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. Try to avoid some options being sentences and others being single words. Using a combination makes it tricky to decide on what case and punctuation to use.
   嘗試確保所有項目都是句子，短語或單詞。 盡量避免某些選擇是句子，而另一些則是單個單詞。 使用組合使得很難決定要使用哪種情況和標點符號。

7.什么時候應該使用它們 (7. When you should use them)

When should you use radio buttons or checkboxes? This relies entirely on what question you are asking. If you want your users to select multiple options, use checkboxes. If you want your users to select only one option, use radio buttons (or another alternative).

什么時候應該使用單選按鈕或復選框？ 這完全取決于您要問什么問題。 如果希望用戶選擇多個選項，請使用復選框。 如果希望用戶僅選擇一個選項，請使用單選按鈕(或另一種選擇)。

何時使用單選按鈕 (When to use a radio button)

I have four rules about when, or when not to, use radio buttons. They are:

對于何時使用或何時不使用單選按鈕，我有四個規則。 他們是：

1. When you only want the user to select one itemIf you want the user to select more than one item then you should rather use checkboxes.

1.當您只希望用戶選擇一項時，如果您希望用戶選擇一項以上，則應使用復選框。

2. If you have fewer than six optionsDepending on your design rules, if there are more than five or six items to choose from, rather use a dropdown. Yes, yes, I know that they are clunky, but they save a lot of space in your design.

2.如果您的選擇少于六個 根據您的設計規則，如果要選擇五個或六個以上的項目，請使用下拉菜單。 是的，是的，我知道它們很笨重，但是它們在您的設計中節省了大量空間。

That being said, if space isn’t an issue, maybe consider using radio buttons instead — particularly if you are designing for mobile. I have seen it work well for fast food deliveries.

話雖如此，如果空間不是問題，則可以考慮改用單選按鈕，尤其是在為移動設備設計時。 我已經看到它可以很好地用于快餐店。

If you are interested in learning more about dropdowns, check out my previous cheat sheet here:

如果您有興趣了解有關下拉菜單的更多信息，請在此處查看我以前的備忘單：

3. You want to force a selection of oneWhen you select an item in a radio button list, you can’t deselect it. You can select something else and change your selection, but you can’t un-answer the question once you have selected an answer.

3.您想強制選擇一個。當您在單選按鈕列表中選擇一個項目時，您不能取消選擇它。 您可以選擇其他內容并更改選擇，但是一旦選擇了答案，便無法取消答案。

4. If the question only has two options that are yes/noIf your question is ‘Would you like to receive notifications?’, ‘Play background music?’ etc., then rather use a toggle. They take up much less space, are cleaner, and — because they are a newer selector type — they have the added bonus of being trendy.

4.如果問題只有兩個選項，則是/否。如果您的問題是“您想接收通知嗎？”，“播放背景音樂？”。 等，然后使用切換鍵。 它們占用的空間少得多，更清潔，并且-因為它們是較新的選擇器類型-因此，它們具有時髦的額外好處。

POST PUBLISH UPDATE:5. If you want your users to click ‘save’ to implement the optionIf you are in a settings page, or in a place where you want to allow the user to umm and err about their options before they click the big green save button - rather use radio buttons (or checkboxes). However, if you want your setting to happen immediately (turning wi-fi on/off) then rather use a toggle.

發布后更新： 5.如果您希望用戶單擊“保存”以實現該選項，則如果您位于設置頁面中，或者要允許用戶在單擊該菜單之前對其選項進行檢查和編輯綠色的大保存按鈕-寧可使用單選按鈕(或復選框)。 但是，如果您希望設置立即生效(打開/關閉wi-fi)，請使用切換開關。

This suggestion comes from Thomas Veit, so go give them some claps in the comments below :)

這個建議來自 Thomas Veit ，所以請在下面的評論中給他們一些鼓掌：)

POST PUBLISH UPDATE:6. If your option’s labels are short, consider using a multiple-choice toggleYou very seldom see this cutie out in the wild, but it is a delight when you do. Multi-choice toggles merge the best of radio buttons and toggles into this little guy. Compact, neat and user friendly. I would only suggest using this if your labels are short — otherwise, it could get a bit hairy on mobile.

發布后更新： 6.如果選項的標簽較短，請考慮使用多項選擇開關。您很少會在野外看到這種可愛的東西，但這樣做時會很高興。 多選切換器將最好的單選按鈕合并在一起，切換到這個小家伙。 緊湊，整潔且用戶友好。 我只建議您在標簽較短的情況下使用此標簽，否則在移動設備上可能會顯得有些毛茸茸。

This suggestion came from Thomas Weitz, so give them some claps in the comments below :)

這個建議來自 Thomas Weitz ，因此請在下面的評論中給他們一些鼓掌：)

何時使用復選框 (When to use checkboxes)

I have two rules about when to use checkboxes, and here they are:

關于何時使用復選框，我有兩個規則，它們是：

1. When you want the user to be able to select multiple options or none at allIf you want your user to be able to add multiple toppings to their pizza, this is the selector for you. The user could select all, some, or none of the checkboxes.

1.當您希望用戶能夠選擇多個選項或根本不選擇任何選項時如果您希望用戶能夠向其披薩添加多個澆頭，則這是您的選擇器。 用戶可以選擇全部，部分或不選擇任何復選框。

2. Single item Follow-up pop quiz: Why is the ‘I have read the terms and conditions’ always a checkbox and not a radio button? Surely it makes sense for it to be a radio button as it is better for ‘yes/no’ type questions?

2.單項后續流行測驗：為什么“我已閱讀條款和條件”始終是一個復選框，而不是一個單選按鈕？ 將它選為單選按鈕肯定很有意義，因為它對“是/否”類型的問題比較好？

Answer: Because you can deselect it. Unlike a radio button with only one item, where you can’t deselect it. If you click it, soz for you: it is now selected FOREVER.

答：因為您可以取消選擇它 。 與僅具有一項的單選按鈕不同，您不能在其中取消選擇它。 如果您單擊它，將為您帶來麻煩：現在將其永久選中。

8.輔助功能清單 (8. Accessibility checklist)

You’ve done it! You have completed designing your selectors, and it is time to ship it off to the development team. But wait! Have you checked that they are accessible first?

你完成了！ 您已經完成選擇器的設計，是時候將其交付給開發團隊了。 可是等等！ 您是否檢查過它們首先可以訪問？

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.

   您的選擇器是否符合WCAG AAA色彩對比標準？ 有些設計師改用AA標準，但我對此非常偏執。 我當前最喜歡的對比度檢查器是WebAIM 。

2. Are your options/items bigger than 44px for touch screens? (Differing reports use 36px.)
   您的觸摸屏的選項/項目是否大于44px？ (不同的報告使用36像素。)
3. Is there more than 8px between each option/item?
   每個選項/項目之間的距離是否超過8px？
4. Is the label/question always visible?
   標簽/問題是否始終可見？
5. Do the relevant fields have helpful feedback text? (E.g. “Please complete this question”)
   相關字段是否有有用的反饋文本？ (例如“請完成此問題”)

If you want to read more, check out: https://webaim.org/techniques/forms/controls

如果您想了解更多信息，請查看： https : //webaim.org/techniques/forms/controls

9.結束語 (9. Closing thoughts)

After this cheat sheet, I am going to move away from ‘form’ UI patterns and move onto other types of UI patterns. BUT if you have any requests to look into any other form field types let a girl know in the comments.

在這份備忘單之后，我將離開“表單” UI模式，轉而使用其他類型的UI模式。 但是，如果您有任何查詢其他任何表單字段類型的請求，請在注釋中告知女孩。

Stay safe out there Medium friends, the world is a crazy, crazy place right now.

在那兒保持安全中型朋友，世界現在是一個瘋狂的地方。