Best Practices

Properties

Direction

In most scenarios, distribute options in a column. Only distribute in a row if the option labels don’t vary a lot in length and fit in a single line, considering localization.

Optional

• Mark a RadioGroup as optional when its options may not apply. For example, preferences for notifications can be left unselected if the merchant doesn’t want to receive them. Consider adding a Custom option together with fields to capture the merchant’s needs.
• By default, the term (optional) is included next to the label.
• Don’t mark the mandatory fields or include many optional fields in a form.

RadioGroup label

• Write the name of the object that is being listed. For example, use the label Fruits when the options are Apple, Orange, and Banana.
• Visually hide the label of the RadioGroup only when the page or section title already contains the name of the object being listed.
• Use sentence case, but capitalize proper nouns.
• Don’t include redundant words. For example, use only Characteristics instead of Product characteristics in a form page that already includes Product in its title.
• Don’t use verbs. For example, instead of Select characteristics, use only Characteristics.
• Don’t use interrogations.

Radio label

• Write a short label that doesn’t vary a lot in length between options and corresponds to the value of the Radio. Use the help text or the RadioGroup label to provide additional context when necessary.
• Use sentence case, but capitalize proper nouns.
• Don’t use personal pronouns. For example, write Personal email instead of My email.
• Don’t include redundant words. For example, use only S, M, and L instead of Size S, Size M, and Size L.

Help text

• Include when it’s necessary to explain the consequences of checking the option.
• Write as if completing the sentence “If you check this option, you or the system…”.
• Start with a verb in the simple present tense. For example, for the option Fragile the help text should be Prints this information on the shipping label.
• Use sentence case, but capitalize proper nouns.
• Don’t write more than one sentence and don’t use periods or commas.

Error text

• Prevent errors whenever possible. When the value of a field is modified, disable other incompatible fields or options automatically.
• Start with an imperative verb. For example, Check an option instead of This field is required.
• Don’t use incomplete sentences. For example, write Check an option instead of Check one.
• Don’t use periods or commas.

Position

• Position in a form: Prefer placing a RadioGroup at the start or end of a form section. However, if the selection affects the state of other fields, place the RadioGroup close to the fields it will affect.
• Order of options: Order them by most to least frequently used, simplest to most complex, least to most risky, or in alphabetical order.

Behavior

Preselecting

• Check a common or recommended option by default when this can make the user more efficient and when it isn’t important for the choice to be conscious.
• When a recommended option is preselected, add (Recommended) to the end of its label so it can still be identified after edits.

Disabling

• Disable a Radio only if it becomes enabled in some condition. For example, an option that becomes unavailable when another field has an specific value.
• When the reason why the option is disabled might be unclear, include a ContextualHelp next to the label to explain.