Layr
⌘K
Ctrl K
Design Systems
Pro
AI Designer
Account
Roadmap
Sign in
Grafana Saga - radio-button
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
<h3>Disabled options</h3> <p>You can disable some options by passing them to the <code>disabledOptions</code> prop. Keep in mind the <code>disabledOptions</code> are compared with options' values by the <code>===</code> operator.</p> <div class="demo-container"> <div class="demo-title">Disabled Options Example</div> <div class="radio-button-list" id="disabledExample"> <label class="radio-option disabled"> <input type="radio" name="disabled" value="prometheus" disabled> <span>Prometheus</span> </label> <label class="radio-option"> <input type="radio" name="disabled" value="graphite" checked> <span>Graphite</span> </label> <label class="radio-option disabled"> <input type="radio" name="disabled" value="elastic" disabled> <span>Elastic</span> </label> <label class="radio-option"> <input type="radio" name="disabled" value="influx"> <span>InfluxDB</span> </label> </div> </div> <div class="code-block">import { RadioButtonList } from '@grafana/ui';const options = [ { label: 'Prometheus', value: 'prometheus' }, { label: 'Graphite', value: 'graphite' }, { label: 'Elastic', value: 'elastic' }, { label: 'InfluxDB', value: 'influx' },];const disabledOptions = ['prometheus', 'elastic'];<RadioButtonGroup options={options} disabledOptions={disabledOptions} value={...} onChange={...}/> </div> <h3>Changing layout</h3> <p>The <code>RadioButtonList</code> layout uses CSS Grid, so it is effortless to split the list into multiple columns</p> <div class="demo-container"> <div class="demo-title">Multi-column Layout</div> <div class="radio-button-list multi-column" id="multiColumnExample"> <label class="radio-option"> <input type="radio" name="multiColumn" value="prometheus" checked> <span>Prometheus</span> </label> <label class="radio-option"> <input type="radio" name="multiColumn" value="graphite"> <span>Graphite</span> </label> <label class="radio-option"> <input type="radio" name="multiColumn" value="elastic"> <span>Elastic</span> </label> <label class="radio-option"> <input type="radio" name="multiColumn" value="influx"> <span>InfluxDB</span> </label> <label class="radio-option"> <input type="radio" name="multiColumn" value="mysql"> <span>MySQL</span> </label> <label class="radio-option"> <input type="radio" name="multiColumn" value="postgres"> <span>PostgreSQL</span> </label> </div> </div> <div class="code-block">import { RadioButtonList } from '@grafana/ui';<RadioButtonGroup options={...} value={...} onChange={...} className={css` grid-template-columns: 1fr 1fr 1fr; `}/> </div> <script> document.addEventListener('DOMContentLoaded', function() { const radioGroups = document.querySelectorAll('.radio-button-list'); radioGroups.forEach(group => { const radioButtons = group.querySelectorAll('input[type="radio"]'); radioButtons.forEach(radio => { radio.addEventListener('change', function() { const parentGroup = this.closest('.radio-button-list'); const allOptions = parentGroup.querySelectorAll('.radio-option'); allOptions.forEach(option => { option.classList.remove('selected'); }); if (this.checked) { this.closest('.radio-option').classList.add('selected'); } }); }); }); }); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">