Layr
⌘K
Ctrl K
Design Systems
Pro
AI Designer
Account
Roadmap
Sign in
Grafana Saga - checkbox
Getting started
Grafana Saga
Grafana UI
Pro
Components
Alert
Badge
Card
Checkbox
Components Status
Field
File Dropzone
Filter Pill
Inline Field
Input
Interactive Table
Modal
Pagination
Plugin Signature
Radio Button
Radio Button Group
Select
Switch
Text
Text Link
Textarea
Toggletip
Tooltip
<div class="checkbox-group"> <div class="checkbox-item"> <input type="checkbox" id="hide-options" /> <label for="hide-options">Hide options</label> </div> <div> <p>Show series</p> <div class="checkbox-item"> <input type="checkbox" id="a-series" /> <label for="a-series">A-series</label> </div> <div class="checkbox-item"> <input type="checkbox" id="b-series" /> <label for="b-series">B-series</label> </div> <div class="checkbox-item"> <input type="checkbox" id="c-series" /> <label for="c-series">C-series</label> </div> </div> </div> </div> <div class="dont-section"> <h3>Don'ts</h3> <div class="checkbox-group"> <div class="checkbox-item"> <input type="checkbox" id="dont-show-options" /> <label for="dont-show-options">Do not show options</label> </div> <div> <p>Show only</p> <div class="checkbox-item"> <input type="checkbox" id="dont-a-series" /> <label for="dont-a-series">A-series</label> </div> <div class="checkbox-item"> <input type="checkbox" id="dont-b-series" /> <label for="dont-b-series">B-series</label> </div> <div class="checkbox-item"> <input type="checkbox" id="dont-c-series" /> <label for="dont-c-series">C-series</label> </div> </div> </div> </div> </div> <p>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.</p> </div> <div class="section"> <h2>Usage</h2> <div class="code-block">import { Forms } from '@grafana/ui';<Checkbox value={true|false} label={...} description={...} onChange={...} /> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const checkboxes = document.querySelectorAll('input[type="checkbox"]'); checkboxes.forEach(checkbox => { checkbox.addEventListener('change', function() { console.log(`${this.id} is ${this.checked ? 'checked' : 'unchecked'}`); }); }); }); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">