Components
Best Practices

Best Practices

Properties

Label

  • Write a short label that corresponds to the value of the Checkbox. Use the help text or the Checkbox Group label to provide additional context when necessary.
  • Use sentence case but capitalize proper nouns.
  • Don't use personal pronouns. For example, write Receive promotional emails instead of I want to receive emails.
  • Don't include negative words. For example, write Receive promotional emails instead of I don't want to receive emails.

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 this option instead of This field is required.
  • Don't use incomplete sentences. For example, write Check this option instead of Check this.
  • Don't use periods or commas.

Position

Prefer placing a Checkbox at the start or end of a form section.

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 Checkbox 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 field is disabled might be unclear, include a ContextualHelp next to the label to explain.