IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-26 02:40:26 -06:00
Code Issues Packages Projects Releases Wiki Activity

@grafana/ui: Checkbox docs (#23141)

Browse Source 
* 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 <dominik.prokop@grafana.com>

Co-authored-by: Tobias Skarhed <tobias.skarhed@gmail.com>
Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
This commit is contained in:
Jess 2020-05-14 16:17:34 +02:00 committed by GitHub
parent 7fbed90b89
commit 405145fdd3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/grafana-ui/src/components/Forms/Checkbox.mdx
View File

@ -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