Types of Fields
Use the default field in most field entry cases when the label on the left and the field entry (or placeholder text) on the right fit on a single line. We can use this type of field with keyboards, number keyboards, and pickers.
Use keyboard entry when there’s a large distribution of values that can be entered into a field or there is no good default value. An example of this is a member’s starting weight during onboarding.
In some special instances, one field can require two input values. For example, weight entry in the imperial system requires two numbers: stone and pounds. In this case, always provide a next and back button above the keyboard to allow members to move through the two parts of the field.
Use pickers when you have a finite set of options for the member to choose from. We recommend using keyboard entry if typing a response is easier than scrolling through a set of options that members are likely familiar with. For example, typing in two letters for the state in an address is likely faster than scrolling through 50 states.
We also advise against using pickers with a long set of options (roughly greater than 20 options) with the exception of numbers, which members are likely familiar with scrolling through.
If members need to see all options side by side to answer the field, use single-item select instead of a picker.
If the options in a picker require a few extra words of explanation, then wrap the text in the picker when it is open. Once the member selects an option, show a summary of that choice so that it fits in the field. For example, in the activity detail screen, we explain what medium effort is when the picker is open, “Medium Intensity / Moderate sweating; talking is hard” and then shorten the copy to “Medium” when the picker is closed.
Single-item select allows members to select one option from a set. Use single item select instead of a pickerif you think that the member needs to see all available options side-by-side, the options require a significant amount of explanation (which should be provided as description text in the table cell), or the question requires further explanation, which should be placed below the options.
Multi-item select allows the member to select multiple options from a set.
Use a multi-line field when the label and entry will commonly not fit on one line. We use multi-line fields for keyboard entry only, not pickers.
If the field will overflow, wrap the entry to two lines, and expand the row.
We use no-label fields in a small number of cases when the context provides enough explanation for a field, even when the field is completed.
Examples of this include the post description in Connect, adding a comment in connect, any chat: 24/7 chat, messaging a coach, and instructions in recipes.
If a field requires additional explanation for why we are asking for that information, we us a Table Cell that takes the member to another screen to make a selection. In most cases, the next screen contains a single item select or default field.
Examples of this are in Weight Settings where we explain their ideal goal weight range and in Recipe Builder where we ask “Is this a drink recipe?”
We use icons as radio buttons in a limited number of self explanatory fields. For example, the meal time field on food detail pages allows members to choose the meal time by tapping on the right meal time icon.
Use on/off switches for simple yes or no questions. If the label does not provide context for a member to make a choice, provide explanation below the field.