From 405145fdd3a8677981e922b6e9cc8a969893c306 Mon Sep 17 00:00:00 2001 From: Jess <53754871+jessover9000@users.noreply.github.com> Date: Thu, 14 May 2020 16:17:34 +0200 Subject: [PATCH] @grafana/ui: Checkbox docs (#23141) * Add "When to use" info to Checkbox.mdx Added info about how checkboxes generally work and when to use another component instead. * Replaced words with proper component names * Update Checkbox.mdx Elaborate on explanations. Add examples for how to use checkboxes the user-friendliest way. * Apply suggestions from code review Co-authored-by: Dominik Prokop Co-authored-by: Tobias Skarhed Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com> Co-authored-by: Dominik Prokop --- .../src/components/Forms/Checkbox.mdx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.mdx b/packages/grafana-ui/src/components/Forms/Checkbox.mdx index 0c0a051c76b..98fdf91961e 100644 --- a/packages/grafana-ui/src/components/Forms/Checkbox.mdx +++ b/packages/grafana-ui/src/components/Forms/Checkbox.mdx @@ -5,6 +5,27 @@ import { Checkbox } from "./Checkbox"; # Checkbox +### When to use + +Checked represents true, un-checked represent false. So you can use them to select a binary option or multiple options in a set. `Checkbox` can be used in groups, where the single checkboxes have no dependencies. That means that selecting one doesn’t affect any other `Checkbox`. When adding a description to your `Checkbox`, write positive statements so that "checked" means "yes" and not "no". That way, you can avoid confusion. + +**DO:** [ ] Hide options +**DON'T:** [ ] Do not show options + +Checkboxes typically only trigger changes after sending a form. If your component should trigger a change immediately, it's better to use a toggle switch instead. Furthermore, checkboxes are not mutually exclusive. That means that selecting one will not disable the others or impact them in any other way. If you want to offer a mutually exclusive choice, use `RadioButtonGroup` or a `Select` dropdown. + +**DO:** +Show series +[ ] A-series +[ ] B-series +[ ] C-series + +**DON'T:** +Show only +[ ] A-series +[ ] B-series +[ ] C-series + ### Usage ```jsx